@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";
:root{--ink:#25014d;--purple:#8522ff;--muted:#877592;--line:#e8dfeb;--paper:#fcfaf7;--green:#6ee934}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,Arial,sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #a6ff7d}a{color:inherit;text-decoration:none}button{background:0 0;border:0}h1,h2,h3,h4,p{margin:0}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:86px;padding:0 5vw;display:flex}.brand{align-items:center;gap:20px;display:flex}.wordmark{letter-spacing:-3px;font-family:Space Grotesk,sans-serif;font-size:40px;font-weight:700;line-height:1}.brand-dot{color:var(--purple);vertical-align:top;margin:0 0 0 3px;font-size:26px;display:inline-block}.brand-divider{background:#d9ccdf;width:1px;height:26px}.product-name{letter-spacing:-.5px;font-size:17px}.header-right{align-items:center;gap:30px;display:flex}.studio-tag{letter-spacing:1.5px;align-items:center;gap:8px;font-size:10px;display:flex}.studio-tag i{background:var(--purple);border-radius:50%;width:6px;height:6px}.history-button{border:1px solid var(--line);background:#fff;border-radius:8px;align-items:center;gap:8px;padding:9px 12px;font-size:12px;display:flex}.history-button span{color:var(--muted);border-left:1px solid var(--line);padding-left:8px;font-size:10px}main{max-width:1440px;margin:auto;padding:45px 5vw 0}.intro{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.eyebrow{letter-spacing:1.6px;color:#877592;font-size:10px;font-weight:700}h1{letter-spacing:-2px;margin:10px 0;font-family:Space Grotesk,sans-serif;font-size:44px;font-weight:500;line-height:1.2}h1 em{color:var(--purple);font-style:normal}.intro p{color:var(--muted);font-size:14px}.palette-mark{margin-right:8px;display:flex}.palette-mark span{border:2px solid var(--paper);border-radius:12px;width:35px;height:48px;margin-left:-7px}.workspace{grid-template-columns:350px minmax(0,1fr);align-items:start;gap:24px;display:grid}.control-panel,.preview-panel{border:1px solid var(--line);background:#fff;border-radius:15px;overflow:hidden}.control-panel{padding:24px}.panel-title{align-items:center;gap:10px;margin-bottom:24px;display:flex}.step{border:1px solid var(--line);color:var(--muted);border-radius:5px;padding:4px 5px;font-family:Space Grotesk,sans-serif;font-size:10px}h2{letter-spacing:-.3px;font-size:15px;font-weight:650}.panel-title svg{color:#b8a6c3;margin-left:auto}.field{margin-bottom:20px}.field label{margin-bottom:9px;font-size:11px;font-weight:600;display:block}.segments{background:#f7f4f9;border-radius:8px;gap:3px;padding:4px;display:flex}.segments button{white-space:nowrap;color:var(--muted);border-radius:5px;flex:1;padding:8px 3px;font-size:11px}.segments button.active{color:var(--ink);background:#fff;font-weight:600;box-shadow:0 1px 5px #25014d12}.label-row{justify-content:space-between;display:flex}.label-row span{color:#a293aa;font-size:9px}textarea{border:1px solid var(--line);resize:vertical;width:100%;height:110px;color:var(--ink);background:#fff;border-radius:9px;padding:12px;font-size:12px;line-height:1.7;display:block}textarea::placeholder{color:#ae9cb9}.field-hint{color:var(--muted);margin-top:8px;font-size:10px;line-height:1.6}.colour-options{justify-content:space-between;gap:5px;display:flex}.colour-options button{border:1px solid #0000;border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:7px;padding:7px 5px 5px;display:flex}.colour-options button.chosen{background:#faf6ff;border-color:#d4bee8}.swatch,.auto-swatch{width:24px;height:24px;color:var(--ink);border-radius:50%;place-items:center;display:grid}.auto-swatch{background:#f5edff}.colour-options small{color:var(--muted);font-size:9px}.colour-options .chosen small{color:var(--ink)}.settings-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.select-wrap{position:relative}.select-wrap select{appearance:none;border:1px solid var(--line);width:100%;height:38px;color:var(--ink);background:#fff;border-radius:8px;padding:0 28px 0 10px;font-size:11px}.select-wrap svg{pointer-events:none;position:absolute;top:12px;right:10px}.generate-button{background:var(--ink);color:#fff;letter-spacing:1px;border-radius:9px;justify-content:center;align-items:center;gap:9px;width:100%;padding:15px 12px;font-size:11px;font-weight:600;transition:background .15s;display:flex}.generate-button:hover:not(:disabled){background:var(--purple)}.generate-button svg:last-child{margin-left:auto}.generate-button svg:first-child{margin-right:auto}.brand-note{color:var(--muted);justify-content:center;align-items:center;gap:6px;margin-top:12px;font-size:9px;display:flex}.brand-note span{background:var(--green);border-radius:50%;width:5px;height:5px}.preview-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:23px 24px;display:flex}.preview-header>div{align-items:center;gap:10px;display:flex}.output-tag{letter-spacing:.4px;color:var(--muted);font-size:9px}.output-tag span{margin:0 5px}.empty-preview{flex-direction:column;justify-content:center;min-height:565px;padding:30px 35px;display:flex}.reference-display{background:#ffe8b5;border-radius:10px;align-self:center;max-width:660px;padding:8px 12px 0;position:relative;overflow:hidden;transform:rotate(-2deg)}.reference-display img{mix-blend-mode:multiply;width:100%;display:block}.reference-label{letter-spacing:1.2px;color:#691601;justify-content:center;align-items:center;gap:6px;padding:10px 0 14px;font-size:7px;display:flex}.reference-label>span{background:#db6200;border-radius:50%;width:4px;height:4px}.empty-copy{text-align:center;margin-top:37px}.empty-copy h3{letter-spacing:-.8px;font-family:Space Grotesk,sans-serif;font-size:23px;font-weight:500}.empty-copy p{color:var(--muted);margin-top:9px;font-size:12px;line-height:1.7}.idea-chips{flex-wrap:wrap;justify-content:center;gap:7px;margin-top:19px;display:flex}.idea-chips button{border:1px solid var(--line);background:#fff;border-radius:20px;align-items:center;gap:5px;padding:6px 10px;font-size:10px;display:flex}.idea-chips button:hover{background:#f5edff;border-color:#ceb5ff}.preview-footer{border-top:1px solid var(--line);background:#fdfbff;justify-content:center;gap:22px;padding:15px 24px;display:flex}.preview-footer span{color:var(--muted);align-items:center;gap:5px;font-size:9px;display:flex}.preview-footer svg{color:#4bbe16;width:11px}.footer{letter-spacing:1px;color:#a290ae;justify-content:space-between;gap:16px;padding:24px 0;font-size:8px;display:flex}.footer span:nth-child(2){letter-spacing:0}.setup-banner{color:#4b0a97;background:#f5edff;padding:13px 24px;font-size:10px;line-height:1.7}.setup-banner>span{font-size:11px;font-weight:700;display:block}.setup-banner a{align-items:center;gap:4px;margin-left:6px;text-decoration:underline;display:inline-flex}.setup-banner code{font-size:10px}.error{color:#9f004e;background:#ffedf6;border:1px solid #ffd5e9;border-radius:8px;justify-content:space-between;align-items:start;gap:10px;margin:16px;padding:13px;font-size:12px;line-height:1.6;display:flex}.selected-concept{background:#f5edff;border-radius:6px;align-items:center;gap:9px;margin-bottom:16px;padding:10px;font-size:11px;display:flex}.selected-concept button{margin-left:auto}.loading-preview{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:565px;padding:30px;display:flex}.loading-shape{color:#4b0a97;background:#e9ffdf;border-radius:27px;place-items:center;width:100px;height:100px;margin-bottom:32px;animation:2s ease-in-out infinite bob;display:grid}.loading-preview h3{font-family:Space Grotesk,sans-serif;font-size:21px}.loading-preview p{color:var(--muted);margin-top:12px;font-size:12px}.loading-preview>span{color:#aa98b5;margin-top:22px;font-size:10px}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-8px)rotate(8deg)}}.concept-area{min-height:565px;padding:35px 28px}.concept-area>h3{margin:10px 0 24px;font-family:Space Grotesk,sans-serif;font-size:23px}.concept-card{border:1px solid var(--line);text-align:left;background:#fff;border-radius:10px;align-items:start;gap:15px;width:100%;margin-bottom:13px;padding:20px 16px;transition:all .15s;display:flex}.concept-card:hover{background:#faf7ff;border-color:#8522ff}.concept-letter{color:var(--purple);background:#f5edff;border-radius:7px;padding:8px 10px;font-size:12px}.concept-card h4{margin-bottom:7px;font-size:14px}.concept-card p{font-size:12px;line-height:1.5}.concept-card small{color:var(--muted);margin-top:8px;font-size:10px;line-height:1.5;display:block}.concept-card>svg{flex-shrink:0;width:15px;margin-left:auto}.result-grid{grid-template-columns:1fr;gap:18px;padding:20px;display:grid}.result-grid.count-2,.result-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}.result-card{border:1px solid var(--line);border-radius:10px;overflow:hidden}.canvas{aspect-ratio:1;place-items:center;display:grid;position:relative}.canvas img{object-fit:contain;width:100%;height:100%}.checkerboard{background-color:#fff;background-image:conic-gradient(#f0edf2 25%,transparent 0 50%,#f0edf2 0 75%,transparent 0);background-size:20px 20px}.solid{background:#f5edff}.variation-tag{letter-spacing:1px;color:#6c557c;background:#ffffffdb;border-radius:4px;padding:5px 7px;font-size:7px;position:absolute;top:12px;left:12px}.result-info{padding:14px 16px 10px}.result-info h3{font-size:13px;line-height:1.5}.result-info p{color:var(--muted);text-transform:capitalize;margin-top:5px;font-size:9px}.result-actions{gap:6px;padding:0 16px 15px;display:flex}.result-actions a{background:#f5edff;border-radius:5px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px;font-size:10px;display:flex}.result-actions button{border:1px solid var(--line);border-radius:5px;place-items:center;padding:7px;display:grid}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#25014d55;justify-content:flex-end;display:flex;position:fixed;inset:0}.history-modal{background:#fff;width:480px;max-width:100%;height:100%;padding:30px;overflow:auto}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-header h2{font-family:Space Grotesk,sans-serif;font-size:22px}.history-empty{color:var(--muted);flex-direction:column;align-items:center;gap:15px;padding:80px 0;display:flex}.history-list{margin-top:24px}.history-list article{border-bottom:1px solid var(--line);align-items:center;gap:15px;padding:15px 0;display:flex}.history-list img{object-fit:contain;border-radius:8px;width:90px;height:90px}.history-list h3{font-size:13px;line-height:1.5}.history-list p{color:var(--muted);margin:6px 0 10px;font-size:9px}.history-list button{color:var(--purple);align-items:center;gap:6px;padding:0;font-size:11px;display:flex}.storage-warning{color:#9f004e;padding-bottom:20px;font-size:11px}@media (min-width:1450px){main{padding-left:50px;padding-right:50px}.workspace{grid-template-columns:375px minmax(0,1fr)}}@media (max-width:1000px){.workspace{grid-template-columns:310px minmax(0,1fr);gap:18px}.control-panel{padding:20px}.empty-preview{padding:25px 20px}.header{padding:0 4vw}main{padding:32px 4vw 0}.studio-tag{display:none}.preview-header{padding:20px 16px}.output-tag{display:none}.preview-footer{gap:10px;padding:15px 10px}.preview-footer span{font-size:8px}.result-grid.count-2,.result-grid.count-4{grid-template-columns:1fr}.settings-grid{gap:10px}}@media (max-width:720px){.header{height:72px}.wordmark{font-size:34px}.brand{gap:13px}.product-name{font-size:14px}.header-right{gap:0}.history-button{padding:8px}.history-button span{display:none}main{padding:30px 18px 0}h1{font-size:36px}.intro{margin-bottom:25px}.intro p{font-size:12px}.palette-mark{display:none}.workspace{grid-template-columns:1fr}.control-panel{padding:22px}.empty-preview,.loading-preview,.concept-area{min-height:450px}.footer{flex-wrap:wrap;line-height:1.6}.footer span:nth-child(2){order:3;width:100%}.result-grid.count-2,.result-grid.count-4{grid-template-columns:1fr 1fr}.result-actions{flex-wrap:wrap}.result-actions a{flex-basis:100%}.result-info{padding:12px}.result-actions{padding:0 12px 12px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}.pair-preview{text-transform:capitalize;align-items:center;gap:10px;margin-top:12px;font-size:11px;display:flex}.pair-preview span{align-items:center;gap:6px;display:flex}.pair-preview i{border-radius:50%;width:18px;height:18px;display:block}.review-warning{color:#8c3b00!important;background:#fff0da!important}.review-details{color:#8c3b00;margin-top:12px;font-size:11px;line-height:1.6}.review-details summary{cursor:pointer;font-weight:600}.review-details ul{padding-left:18px}.review-details p{text-transform:none;font-size:11px}.result-actions .svg-button{background:#f5edff;padding:8px;font-size:10px}.svg-note{color:var(--muted);padding:12px 20px;font-size:10px;line-height:1.6}.archive-warning{font-weight:600;color:#8c3b00!important}.history-list button{margin-top:8px}.result-grid.count-3,.result-grid.count-5,.result-grid.count-6,.result-grid.count-7,.result-grid.count-8{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:720px){.header-right{gap:4px}.history-button{font-size:10px}.result-grid{grid-template-columns:1fr!important}.result-actions{flex-wrap:wrap}}.svg-export-settings{border-top:1px solid var(--line);padding:16px 20px}.svg-export-settings label{margin-bottom:8px;font-size:11px;font-weight:600;display:block}.svg-export-settings select{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:6px;padding:10px;font-size:11px}.svg-export-settings p{color:var(--muted);margin-top:8px;font-size:10px;line-height:1.6}.svg-ready{color:#357910;background:#effbe9;border-radius:5px;margin:0 16px 16px;padding:10px;font-size:11px}.svg-ready a{font-weight:600;text-decoration:underline}.history-modal select{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:6px;padding:10px}.result-actions .copy-button{background:#fff;justify-content:center;align-items:center;gap:5px;padding:8px;font-size:10px;display:flex}.result-actions button:disabled{opacity:.55;cursor:wait}.copy-notice{color:#357910;background:#effbe9;border-radius:5px;margin:0 16px 12px;padding:10px;font-size:11px}.svg-code{margin:0 16px 16px}.svg-code label{margin-bottom:6px;font-size:11px;display:block}.svg-code textarea{resize:vertical;border:1px solid var(--line);border-radius:6px;width:100%;height:140px;padding:10px;font:11px monospace}.svg-export-settings label[for=svg-texture]{margin-top:12px}.generation-modes{flex-wrap:wrap;gap:8px;margin:0 0 22px;display:flex}.generation-modes a{color:#25014d;background:#fff;border:1px solid #ded4e8;border-radius:8px;padding:10px 14px;font-size:13px;text-decoration:none}.generation-modes a[aria-current=page]{color:#fff;background:#25014d}.header .generation-modes{margin:0}.vector-canvas{min-height:400px}.vector-canvas img{max-height:560px}.vector-note{color:#766582;padding:18px;font-size:13px;line-height:1.6}.vector-lab select{color:#25014d;background:#fff;border:1px solid #ded4e8;border-radius:6px;width:100%;padding:10px}.vector-lab .field-hint{line-height:1.6}.vector-source{padding:16px;font-size:13px}.vector-source textarea{resize:vertical;width:100%;height:160px;margin-top:10px;font:11px monospace}