:root{--purple:#6b30b3;--deep:#4b1e80;--ink:#27212e;--muted:#706779;--line:#e8e0ee;--pale:#f6f0fb;--gold:#dfbc72;--shadow:0 18px 50px rgba(59,29,88,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fdfcfe;color:var(--ink);font:14px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:var(--purple)}[hidden]{display:none!important}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}*:focus-visible{outline:3px solid #d0a2ff;outline-offset:3px}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:15px;top:-80px;z-index:100;padding:10px 16px;background:#fff;border-radius:8px}.skip-link:focus{top:10px}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand,.brand-name{display:flex;align-items:center;gap:10px}.brand-name{text-decoration:none;color:var(--ink);font-size:16px;letter-spacing:.05em}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--purple);color:#fff;font-size:18px;font-weight:900}.brand-separator{width:1px;height:23px;margin:0 3px;background:#ddd2e5}.brand-tools{font-weight:750;text-decoration:none}.site-header nav{display:flex;align-items:center;gap:22px}.site-header nav a{color:#554c5e;font-size:12px;font-weight:700;text-decoration:none}.site-header nav a:hover{color:var(--purple)}.site-header nav .all-tools{color:var(--purple)}.breadcrumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:24px 0 28px;color:#8a8192;font-size:11px}.breadcrumb a{color:#777081;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.eyebrow{margin:0 0 10px;color:var(--purple);font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}.hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:360px;overflow:hidden;padding:45px 54px;border-radius:21px;background:radial-gradient(circle at 82% 38%,#8a50b5 0,#6932a7 43%,#481d7f 100%);color:#fff}.hero .eyebrow{color:#e4c6fa}.status-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#f2ca75}.hero h1{margin:0;font-size:clamp(39px,4.7vw,63px);line-height:1.09;letter-spacing:-.055em}.hero h1 span{color:#f1d187}.hero-copy>p:not(.eyebrow){max-width:510px;margin:19px 0;color:#f1e9f6;font-size:15px}.hero-points{display:flex;flex-wrap:wrap;gap:7px 16px;color:#f6eefb;font-size:11px;font-weight:700}.hero-cta{display:inline-flex;gap:10px;align-items:center;margin-top:22px;padding:10px 16px;border-radius:9px;background:#fff;color:var(--deep);font-size:12px;font-weight:850;text-decoration:none}.hero-cta:hover{background:#f6eafa}.hero-art{position:relative;min-height:280px}.art-window{position:absolute;inset:18px 5px 15px 7px;overflow:hidden;border:1px solid #ffffff57;border-radius:15px;background:#fff;box-shadow:0 27px 55px #280f5188;transform:rotate(-3deg)}.art-tabs{display:flex;align-items:end;gap:3px;height:52px;padding:13px 14px 0;background:#efebf5;color:#6f637a;font-size:10px}.art-tabs>span{display:flex;align-items:center;gap:6px;height:39px;padding:0 12px;border-radius:8px 8px 0 0;background:#e3dce9;white-space:nowrap}.art-tabs>span:last-child{background:#fff;color:#392947}.art-fav{display:grid;place-items:center;width:15px;height:15px;border-radius:4px;background:var(--purple);color:#fff;font-style:normal;font-size:10px;font-weight:850}.art-fav.second{background:#f4c77f;color:#694613}.art-address{margin:15px 20px;padding:8px 13px;border:1px solid #e9e2ee;border-radius:7px;color:#84788d;font-size:10px}.art-address span{font-size:16px;margin-right:7px}.art-content{display:flex;align-items:center;gap:19px;margin:27px 43px}.art-logo{display:grid;place-items:center;width:75px;height:75px;border-radius:18px;background:#6941a5;color:#f3d895;font-size:50px;line-height:1}.art-content b,.art-content small{display:block}.art-content b{font-size:19px;color:#3e3350}.art-content small{font-size:11px;color:#887b93}.art-icon{position:absolute;right:-12px;bottom:-8px;display:grid;place-items:center;width:82px;height:82px;border:6px solid #fff;border-radius:18px;background:#f4cc82;color:#734319;font-size:52px;box-shadow:0 14px 32px #2a0f5355;transform:rotate(12deg)}.generator{margin-top:27px;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:20px}.section-head{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:29px 32px}.section-head h2,.results-head h2,.knowledge h2,.tips h2,.faq h2{margin:0;font-size:clamp(26px,3vw,35px);line-height:1.2;letter-spacing:-.04em}.section-head p:not(.eyebrow){margin:7px 0 0;color:var(--muted);font-size:13px}.step-label{padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:#9a8b9f;font:700 10px ui-monospace,monospace;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);border-top:1px solid var(--line)}.tool-card{padding:28px 32px 30px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:24px;padding:5px;border-radius:10px;background:#f4f0f7}.mode-switch button{min-height:41px;border:0;border-radius:7px;background:transparent;color:#675c6f;font-size:12px;font-weight:800}.mode-switch button.active{background:#fff;color:var(--purple);box-shadow:0 3px 10px #4c26621b}.dropzone{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:184px;padding:22px;border:2px dashed #cdb7de;border-radius:11px;background:#fcf9ff;color:#5b5064;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}.dropzone:hover,.dropzone.dragging{border-color:var(--purple);background:#f4ebfb}.dropzone .drop-icon{display:grid;place-items:center;width:43px;height:43px;margin-bottom:8px;border-radius:10px;background:#eee0fa;color:var(--purple);font-size:27px}.dropzone strong{font-size:14px}.dropzone span:not(.drop-icon){font-size:12px}.dropzone u{color:var(--purple);font-weight:800;text-underline-offset:3px}.dropzone small{margin-top:7px;color:#8d8197;font-size:10px}.field-help,.field small{display:block;margin:7px 0 0;color:var(--muted);font-size:11px}.file-name{overflow-wrap:anywhere;margin:12px 0 0;padding:9px 11px;border-radius:7px;background:#edf7f0;color:#25703e;font-size:11px;font-weight:700}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}.common-fields{padding-top:18px;border-top:1px solid var(--line)}.field label{display:block;margin-bottom:7px;font-size:12px;font-weight:800}.field label span{color:#948b9b;font-weight:500}.field>input[type=text],.field select{display:block;width:100%;min-height:43px;padding:9px 11px;border:1px solid #dcd2e2;border-radius:8px;background:#fff;color:var(--ink)}.field>input[type=text]:focus,.field select:focus{border-color:var(--purple)}.field input[type=range]{display:block;width:100%;margin:15px 0 0;accent-color:var(--purple)}.field output{float:right;color:var(--purple);font-size:11px;font-weight:800}.color-field{display:flex;align-items:center;gap:10px;min-height:43px;padding:5px 10px;border:1px solid #dcd2e2;border-radius:8px}.color-field input{width:36px;height:30px;padding:0;border:0;background:none;cursor:pointer}.color-field span{color:#66576f;font:700 11px ui-monospace,monospace}.check-row{display:flex;align-items:start;gap:10px;margin-top:19px;font-size:12px;font-weight:750;cursor:pointer}.check-row input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--purple)}.check-row small{display:block;color:var(--muted);font-size:10px;font-weight:400}.site-field{margin-top:20px}.input-error{margin:16px 0 0;padding:10px 12px;border-radius:7px;background:#fff0f2;color:#a9233e;font-size:11px}.primary-button{min-height:45px;padding:10px 17px;border:1px solid var(--purple);border-radius:9px;background:var(--purple);color:#fff;font-size:12px;font-weight:850}.primary-button:hover{background:var(--deep)}.primary-button:disabled{opacity:.55;cursor:wait}.tool-card>.primary-button{width:100%;margin-top:22px}.tool-card>.primary-button span{margin-left:6px}.privacy-note{margin:10px 0 0;color:#817785;font-size:10px;text-align:center}.preview-card{display:flex;flex-direction:column;padding:27px 28px;border-left:1px solid var(--line);background:linear-gradient(145deg,#fbf8fd,#f5effa)}.preview-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.preview-head h3{margin:0;font-size:17px}.preview-state{padding:5px 9px;border-radius:99px;background:#eee2f6;color:var(--purple);font-size:10px;font-weight:750;white-space:nowrap}.preview-stage{display:grid;place-items:center;min-height:300px;margin:22px 0;border:1px solid #e9dff0;border-radius:15px;background-color:#fff;background-image:conic-gradient(#f3eef7 25%,#fff 0 50%,#f3eef7 0 75%,#fff 0);background-size:28px 28px}.preview-stage canvas{display:block;width:min(210px,62%);aspect-ratio:1;max-height:210px;filter:drop-shadow(0 13px 17px #30194a38)}.preview-placeholder{display:flex;align-items:center;flex-direction:column;color:#a49aac;text-align:center}.preview-placeholder span{font-size:75px;line-height:1;color:#cbb5db}.preview-placeholder strong{font-size:14px}.preview-placeholder small{font-size:11px}.preview-contexts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.browser-context,.phone-context{display:flex;align-items:center;gap:10px;min-width:0;min-height:72px;padding:11px;border:1px solid #e8dfed;border-radius:9px;background:#fff;font-size:11px;font-weight:800}.browser-context>span:last-child,.phone-context>span:last-child{min-width:0}.preview-contexts small{display:block;color:#877c90;font-size:9px;font-weight:500}.context-icon,.phone-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:6px;background:#eee4f5 center/cover no-repeat;color:var(--purple);font-size:17px}.phone-icon{width:40px;height:40px;border-radius:9px}.preview-tip{margin:16px 0 0;color:#8b8193;font-size:10px}.progress{padding:13px 30px;border-top:1px solid var(--line);background:#fbf5ff;color:var(--purple);font-size:12px;font-weight:750}.results{margin-top:26px;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:18px}.results-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 31px}.results-head p:not(.eyebrow){margin:7px 0 0;color:var(--muted);font-size:12px}.results-head .primary-button{white-space:nowrap}.asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 30px 30px;border-top:1px solid var(--line)}.asset-card{display:flex;align-items:start;flex-direction:column;min-width:0;padding:17px;border:1px solid var(--line);border-radius:11px;background:#fff}.asset-image{display:grid;place-items:center;align-self:stretch;height:95px;margin-bottom:11px;border-radius:8px;background-color:#f9f6fc;background-image:conic-gradient(#f2edf5 25%,#fff 0 50%,#f2edf5 0 75%,#fff 0);background-size:18px 18px}.asset-image img{width:64px;height:64px;object-fit:contain;image-rendering:auto}.asset-card strong{font-size:14px}.asset-card span{color:#685e70;font-size:11px}.asset-card small{overflow-wrap:anywhere;color:#9a8fa0;font-size:10px}.asset-card button{width:100%;min-height:36px;margin-top:auto;padding:7px 10px;border:1px solid #ddd0e9;border-radius:7px;background:#fbf8fe;color:var(--purple);font-size:11px;font-weight:800}.asset-card button:hover{border-color:var(--purple);background:#f2e7fa}.ico-symbol{background:#f1e7fa;color:var(--purple);font-size:30px;font-weight:900;letter-spacing:-.08em}.snippet-block{padding:27px 30px;border-top:1px solid var(--line);background:#f9f6fb}.snippet-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.snippet-head h3{margin:0;font-size:18px}.snippet-head p:not(.eyebrow){margin:5px 0 0;color:var(--muted);font-size:11px}.secondary-button{min-height:40px;padding:9px 14px;border:1px solid #d9c7e6;border-radius:8px;background:#fff;color:var(--purple);font-size:11px;font-weight:800;white-space:nowrap}.secondary-button:hover{background:#f0e5f9}.snippet-block pre{overflow:auto;max-height:230px;margin:19px 0 0;padding:18px;border:1px solid #e4dce9;border-radius:9px;background:#fff;color:#4b365e;font-size:11px;line-height:1.75}.snippet-block>p{margin:8px 0 0;color:var(--purple);font-size:11px}.snippet-block textarea{width:100%;min-height:100px;margin-top:10px}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 0}.feature-strip>div{display:flex;align-items:center;gap:11px}.feature-strip>div>span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:#f0e7f8;color:var(--purple);font:800 10px ui-monospace,monospace}.feature-strip p{margin:0}.feature-strip strong,.feature-strip small{display:block}.feature-strip strong{font-size:11px}.feature-strip small{color:var(--muted);font-size:10px}.guide,.knowledge,.tips,.faq{scroll-margin-top:24px}.guide{padding:65px 0}.guide .section-head{padding:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;margin:28px 0 0;padding:0}.steps li{padding-top:18px;border-top:2px solid #dfd0e8}.steps li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f0e7f8;color:var(--purple);font:800 11px ui-monospace,monospace}.steps h3{margin:12px 0 5px;font-size:16px}.steps p{margin:0;color:var(--muted);font-size:12px}.knowledge{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:39px;border:1px solid #e9dff0;border-radius:16px;background:#f6effb}.knowledge p:not(.eyebrow){color:#64596c;font-size:12px}.knowledge code,.tips code{padding:1px 3px;border-radius:4px;background:#efe3f7;color:#532789;font-size:.94em}.size-card{overflow:hidden;border:1px solid #e2d5eb;border-radius:11px;background:#fff;box-shadow:0 15px 30px #361b4d11}.size-card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;background:#4d2876;color:#fff}.size-card-head span{color:#d8bced;font-size:10px;font-weight:800;letter-spacing:.1em}.size-card-head strong{font-size:11px}.size-card>div:not(.size-card-head){display:flex;justify-content:space-between;gap:15px;padding:14px 18px;border-top:1px solid var(--line);font-size:11px}.size-card>div:not(.size-card-head) b{color:var(--purple)}.size-card>div:not(.size-card-head) span{color:var(--muted);text-align:right}.tips{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;padding:66px 0 49px;border-bottom:1px solid var(--line)}.tips p:not(.eyebrow){margin:0 0 11px;color:var(--muted);font-size:13px}.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;padding:65px 0 49px}.faq>div:first-child>p:last-child{color:var(--muted);font-size:13px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{position:relative;padding:16px 24px 16px 0;cursor:pointer;font-size:13px;font-weight:800;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:0;top:10px;color:var(--purple);font-size:23px;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list details p{margin:0 20px 17px 0;color:var(--muted);font-size:12px}.source-note{padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:#fbf9fc;color:var(--muted);font-size:11px}.source-note strong{color:#51425e}.related{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 0 50px}.related h2{margin:0;font-size:15px}.related>div{display:flex;gap:12px 24px;flex-wrap:wrap}.related a{font-size:11px;font-weight:700;text-decoration:none}.related a:hover{text-decoration:underline}.site-footer{padding:28px 0;border-top:1px solid var(--line);background:#fbf9fc}.site-footer .wrap{display:flex;align-items:center;gap:20px}.site-footer strong{font-size:14px;letter-spacing:.05em}.site-footer strong span{color:var(--purple);letter-spacing:0}.site-footer p{flex:1;margin:0;color:var(--muted);font-size:10px}.site-footer .wrap>div{display:flex;gap:17px}.site-footer a{color:var(--muted);font-size:10px;text-decoration:none}
@media(max-width:900px){.hero{padding:40px}.art-content{margin-inline:25px}.workspace{grid-template-columns:1fr .85fr}.tool-card{padding:25px}.preview-card{padding:25px}.asset-grid{grid-template-columns:repeat(3,1fr)}.knowledge,.tips,.faq{gap:25px}}
@media(max-width:720px){.wrap{width:calc(100% - 32px)}.header-inner{min-height:64px}.site-header nav a:not(.all-tools){display:none}.hero{grid-template-columns:1fr;min-height:auto;padding:35px 30px}.hero-art{display:none}.hero h1{font-size:45px}.workspace{grid-template-columns:1fr}.preview-card{border-left:0;border-top:1px solid var(--line)}.preview-stage{min-height:270px}.preview-stage canvas{width:190px}.feature-strip{grid-template-columns:1fr 1fr}.steps{gap:15px}.knowledge,.tips,.faq{grid-template-columns:1fr}.knowledge{padding:27px}.tips,.faq{gap:20px}.results-head{align-items:start;flex-direction:column}.asset-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.brand-name{font-size:13px}.brand-mark{width:29px;height:29px}.brand-tools{font-size:12px}.site-header nav .all-tools{font-size:11px}.hero{padding:30px 24px}.hero h1{font-size:37px}.hero-copy>p:not(.eyebrow){font-size:13px}.section-head{padding:23px}.step-label{display:none}.tool-card,.preview-card{padding:20px}.two-fields{grid-template-columns:1fr;gap:12px}.mode-switch button{font-size:11px}.preview-stage{min-height:235px}.preview-stage canvas{width:165px}.results-head,.snippet-block{padding:22px}.asset-grid{gap:9px;padding:16px}.asset-card{padding:12px}.asset-image{height:80px}.asset-image img{width:55px;height:55px}.asset-card strong{font-size:12px}.asset-card span,.asset-card small{font-size:9px}.asset-card button{font-size:10px}.snippet-head{align-items:start;flex-direction:column}.snippet-block pre{font-size:9px}.feature-strip,.steps{grid-template-columns:1fr}.guide{padding:47px 0}.knowledge{padding:22px}.tips,.faq{padding:47px 0 34px}.related{align-items:start;flex-direction:column}.site-footer .wrap{align-items:start;flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#source-file:focus-visible+.dropzone{outline:3px solid #d0a2ff;outline-offset:3px}