:root{--purple:#6b30b3;--purple-dark:#50218a;--ink:#292331;--muted:#706777;--line:#e8e0ec;--pale:#f5effa;--shadow:0 16px 46px rgba(63,32,87,.075)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fcfbfd;color:var(--ink);font:14px/1.68 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 #c793f3;outline-offset:3px}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;left:14px;top:-75px;z-index:100;padding:10px 14px;background:#fff;border-radius:8px}.skip-link:focus{top:10px}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}.brand,.brand-name{display:flex;align-items:center;gap:10px}.brand-name{font-size:16px;letter-spacing:.05em;color:var(--ink);text-decoration:none}.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{height:22px;width:1px;margin:0 3px;background:#dacde4}.brand-tools{font-weight:750;text-decoration:none}.site-header nav{display:flex;align-items:center;gap:23px}.site-header nav a{color:#5a5062;font-size:12px;font-weight:700;text-decoration:none}.site-header nav a:hover,.site-header nav .all-tools{color:var(--purple)}.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:22px 0 25px;color:#8b8291;font-size:11px}.breadcrumb a{color:#726a7b;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:1.06fr .94fr;align-items:center;gap:30px;min-height:347px;padding:43px 52px;border-radius:20px;background:radial-gradient(circle at 80% 50%,#8a55bd 0,#6931a5 50%,#451a7a 100%);color:#fff;overflow:hidden}.hero .eyebrow{color:#e5c9ff}.status-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#efd089}.hero h1{margin:0;font-size:clamp(33px,4vw,52px);line-height:1.14;letter-spacing:-.045em}.hero h1 span{color:#f3d494;font-size:.74em;letter-spacing:-.035em}.hero-copy>p:not(.eyebrow){max-width:590px;margin:17px 0;color:#eee5f5;font-size:15px}.hero-points{display:flex;flex-wrap:wrap;gap:6px 15px;color:#f8f0fc;font-size:11px;font-weight:700}.hero-action{display:inline-flex;align-items:center;gap:11px;margin-top:21px;padding:10px 16px;border-radius:9px;background:#fff;color:var(--purple-dark);font-size:12px;font-weight:850;text-decoration:none}.hero-action:hover{background:#f4eafb}.hero-art{position:relative;height:260px}.art-browser{position:absolute;inset:10px 10px 10px 5px;overflow:hidden;border:1px solid #ffffff66;border-radius:14px;background:#fff;box-shadow:0 20px 42px #280d5180;transform:rotate(-2deg)}.art-bar{display:flex;align-items:center;gap:5px;height:36px;padding:0 12px;background:#f4eff8}.art-bar i{width:7px;height:7px;border-radius:50%;background:#d8cbe2}.art-bar i:first-child{background:#e9a7ae}.art-bar i:nth-child(2){background:#e7cc8d}.art-bar span{margin-left:auto;padding:3px 29px;border-radius:4px;background:#fff;color:#9b8fa5;font-size:8px}.art-body{padding:20px}.art-code{overflow:hidden;white-space:nowrap;margin:7px 0;padding:8px 10px;border-radius:5px;background:#f8f5fa;font:10px ui-monospace,monospace}.art-code em{color:#8b679f;font-style:normal}.art-code b{color:#4a2f68;font-weight:700}.art-preview{margin-top:17px;padding:12px 15px;border-left:3px solid #9657cb;background:#faf6fd}.art-preview small,.art-preview strong,.art-preview span{display:block}.art-preview small{color:#a28aad;font-size:8px;letter-spacing:.1em}.art-preview strong{color:#4f2990;font-size:15px}.art-preview span{color:#837487;font-size:10px}.art-badge{position:absolute;right:-8px;bottom:-10px;display:grid;place-items:center;width:75px;height:75px;border:6px solid #fff;border-radius:15px;background:#e8c179;color:#603c13;font:800 23px ui-monospace,monospace;transform:rotate(10deg);box-shadow:0 10px 28px #200f4055}.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:27px 0 31px}.intro-strip>div{display:flex;align-items:center;gap:11px}.intro-strip>div>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:#eee5f6;color:var(--purple);font:800 10px ui-monospace,monospace}.intro-strip p{margin:0}.intro-strip strong,.intro-strip small{display:block}.intro-strip strong{font-size:11px}.intro-strip small{color:var(--muted);font-size:10px}.generator{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:20px}.section-heading{display:flex;align-items:start;justify-content:space-between;gap:18px;padding:27px 31px}.section-heading h2,.code-top h2,.guide h2,.install h2,.faq h2{margin:0;font-size:clamp(26px,3vw,35px);letter-spacing:-.04em;line-height:1.2}.section-heading p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:12px}.section-chip{padding:6px 10px;border:1px solid #e9ddf1;border-radius:99px;background:#f8f3fc;color:var(--purple);font:800 10px ui-monospace,monospace;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);border-top:1px solid var(--line)}.form-card{min-width:0;padding:29px 31px}.form-section-title{display:flex;gap:10px;align-items:start;margin:0 0 21px}.section-number{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:#eee4f8;color:var(--purple);font:800 10px ui-monospace,monospace}.form-section-title h3{margin:0;font-size:18px;line-height:1.25}.form-section-title p{margin:2px 0 0;color:var(--muted);font-size:11px}.form-divider{height:1px;margin:28px 0;background:var(--line)}.field{margin-bottom:18px}.field label,.label-row label{display:block;margin-bottom:7px;font-size:12px;font-weight:800}.label-row{display:flex;justify-content:space-between;gap:10px}.label-row b{color:#b32f64}.counter{color:#8e8395;font:700 11px ui-monospace,monospace}.optional{margin-left:4px;color:#958c9b;font-size:10px;font-weight:500}.field input[type=text],.field input[type=url],.field select,.field textarea{display:block;width:100%;min-height:43px;padding:9px 11px;border:1px solid #dcd2e4;border-radius:8px;background:#fff;color:var(--ink);font-size:13px;outline:0}.field textarea{resize:vertical;min-height:79px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6b30b31b}.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#c44b65}.field input::placeholder,.field textarea::placeholder{color:#a89bac}.field small,.field-meta{display:block;margin-top:6px;color:var(--muted);font-size:10px}.field-meta{display:flex;justify-content:space-between;align-items:start;gap:12px}.field-meta>span:first-child{max-width:72%}.length-hint{white-space:nowrap;font-weight:750}.length-hint[data-level=good]{color:#24744b}.length-hint[data-level=short],.length-hint[data-level=long]{color:#ad6b21}.field-error{margin:6px 0 0;color:#ab2946;font-size:11px;font-weight:650}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check-field{display:flex;align-items:start;gap:10px;margin:16px 0 19px;cursor:pointer}.check-field input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--purple)}.check-field strong,.check-field small{display:block}.check-field strong{font-size:12px}.check-field small{color:var(--muted);font-size:10px}.theme-check{padding-top:16px;border-top:1px solid var(--line)}.color-field{display:flex;align-items:center;gap:11px}.color-field label{flex-basis:100%;margin:0}.color-field input[type=color]{width:43px;height:35px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}.color-field span{color:#655675;font:700 11px ui-monospace,monospace}.legacy{margin:17px 0 20px;border:1px solid var(--line);border-radius:9px}.legacy summary{padding:11px 13px;cursor:pointer;font-size:11px;font-weight:800}.legacy summary span{color:#9b8da1;font-weight:500}.legacy>.field{padding:0 13px 13px;margin:0}.advanced-group{margin-top:11px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.advanced-group summary{display:flex;align-items:center;gap:11px;padding:15px;cursor:pointer;list-style:none;background:#fbf9fd}.advanced-group summary::-webkit-details-marker{display:none}.summary-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:#eee3f7;color:var(--purple);font-size:16px;font-weight:850}.advanced-group summary strong,.advanced-group summary small{display:block}.advanced-group summary strong{font-size:13px}.advanced-group summary small{color:var(--muted);font-size:10px}.summary-arrow{margin-left:auto;color:var(--purple);font-size:18px}.advanced-group[open] .summary-arrow{transform:rotate(180deg)}.advanced-body{padding:19px 15px 4px;border-top:1px solid var(--line)}.preview-card{min-width:0;padding:28px;border-left:1px solid var(--line);background:linear-gradient(150deg,#fbf8fd,#f5effb)}.preview-heading h2{margin:0;font-size:21px;letter-spacing:-.03em}.preview-heading p:not(.eyebrow){margin:5px 0 0;color:var(--muted);font-size:11px}.preview-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:23px;padding:4px;border:1px solid #e5dbea;border-radius:9px;background:#f2eaf7}.preview-tabs button{min-height:37px;padding:5px;border:0;border-radius:6px;background:transparent;color:#6c5d75;font-size:11px;font-weight:800}.preview-tabs button.active{background:#fff;color:var(--purple);box-shadow:0 3px 9px #3d1a581a}.preview-panel{min-height:300px;margin-top:15px}.google-preview{padding:24px 21px;border:1px solid #e9e1ed;border-radius:11px;background:#fff;box-shadow:0 8px 20px #3f25500d}.search-identity{display:flex;align-items:center;gap:9px}.search-favicon{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;background:#e8e2f3;color:#673ab2;font-size:15px;font-weight:850}.search-identity strong,.search-identity small{display:block;max-width:310px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-identity strong{font-size:11px;font-weight:650}.search-identity small{color:#5e5a60;font-size:10px}.google-preview h3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:14px 0 4px;color:#1a0dab;font-size:19px;line-height:1.35;font-weight:500}.google-preview p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin:0;color:#4d5156;font-size:12px;line-height:1.55}.preview-disclaimer{margin:11px 2px 0;color:#817689;font-size:10px}.social-preview{overflow:hidden;border:1px solid #e2d9e7;border-radius:12px;background:#fff;box-shadow:0 8px 20px #3f25500d}.social-image{display:grid;place-items:center;position:relative;aspect-ratio:1.91/1;background:linear-gradient(135deg,#eee2f6,#f9f6fb);color:#927f9d;text-align:center;font-size:11px}.social-image span{padding:10px}.social-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.social-body{padding:15px}.social-body small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8b7d91;font-size:10px;letter-spacing:.05em}.social-body h3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:4px 0;font-size:16px;line-height:1.35}.social-body p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin:0;color:#6d626f;font-size:11px}.x-preview.summary{display:grid;grid-template-columns:110px 1fr}.x-preview.summary .social-image{aspect-ratio:1/1}.x-preview.summary .social-body{display:flex;flex-direction:column;justify-content:center}.x-preview.summary .social-body h3{font-size:13px}.x-preview.summary .social-body p{font-size:10px}.preview-summary{display:grid;gap:7px;margin-top:18px;padding:14px;border:1px solid #e9ddf0;border-radius:9px;background:#fff;color:#6b5c73;font-size:10px}.code-section{margin-top:26px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:20px}.code-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:27px 30px}.code-top p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:12px}.code-state{padding:6px 11px;border-radius:99px;background:#f5edf7;color:#816e8d;font-size:10px;font-weight:850;white-space:nowrap}.code-state.ready{background:#e5f5e9;color:#257347}.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 17px;background:#281d35;color:#c9bad6;font:10px ui-monospace,monospace}.code-toolbar>div{display:flex;gap:7px}.primary-button,.secondary-button{min-height:38px;padding:8px 13px;border-radius:7px;font-size:11px;font-weight:800;white-space:nowrap}.primary-button{border:1px solid var(--purple);background:var(--purple);color:#fff}.primary-button:hover{background:var(--purple-dark)}.secondary-button{border:1px solid #d9cde3;background:#fff;color:var(--purple)}.secondary-button:hover{background:#f5edf9}button:disabled{opacity:.55;cursor:not-allowed}.code-section pre{overflow:auto;max-height:420px;min-height:235px;margin:0;padding:22px 24px;background:#211a2b;color:#e9daef;font-size:11px;line-height:1.72;white-space:pre}.code-section>p{margin:10px 20px 0;color:var(--purple);font-size:11px}.code-notes{display:grid;gap:4px;max-height:140px;overflow:auto;margin:10px 20px 17px;padding-left:19px;color:#826a40;font-size:10px}.code-notes:empty{display:none}.code-section textarea{width:calc(100% - 40px);min-height:120px;margin:5px 20px 20px;border:1px solid var(--line);border-radius:7px;padding:10px;font:11px ui-monospace,monospace}.guide{padding:75px 0 63px;scroll-margin-top:20px}.guide .section-heading{padding:0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}.guide-grid article{min-width:0;padding:20px;border:1px solid var(--line);border-radius:11px;background:#fff}.guide-grid article>span{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#eee5f6;color:var(--purple);font:800 10px ui-monospace,monospace}.guide-grid h3{margin:12px 0 5px;font-size:15px}.guide-grid p{margin:0;color:var(--muted);font-size:11px}.guide-grid code,.install code,.faq code,.source-note code{padding:1px 3px;border-radius:3px;background:#f0e8f7;color:#5d2a91;font-size:.94em}.install{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:34px;border:1px solid #e7dced;border-radius:15px;background:#f4edf9}.install p:not(.eyebrow){margin:11px 0 0;color:#655a6e;font-size:12px}.install-steps{display:grid;gap:9px}.install-steps>div{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:8px;background:#fff;color:#574b61;font-size:11px;font-weight:700}.install-steps span{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:6px;background:#eee2f7;color:var(--purple);font-weight:850}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;padding:69px 0 45px;scroll-margin-top:20px}.faq>div:first-child>p:last-child{color:var(--muted);font-size:12px}.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:15px 25px 15px 0;cursor:pointer;font-size:12px;font-weight:800;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:0;top:9px;color:var(--purple);font-size:23px;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list details p{margin:0 18px 17px 0;color:var(--muted);font-size:11px}.source-note{padding:17px 20px;border:1px solid var(--line);border-radius:9px;background:#fbf9fc;color:var(--muted);font-size:11px}.source-note strong{color:#54475e}.related{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 0}.related h2{margin:0;font-size:15px}.related>div{display:flex;flex-wrap:wrap;gap:10px 23px}.related a{font-size:11px;font-weight:700;text-decoration:none}.related a:hover{text-decoration:underline}.contact-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:62px;padding:29px 33px;border-radius:15px;background:linear-gradient(110deg,#ede2f9,#f9f5fd)}.contact-cta h2{margin:0;font-size:27px;letter-spacing:-.04em}.contact-cta p:not(.eyebrow){max-width:670px;margin:7px 0 0;color:#675e6d;font-size:12px}.contact-cta>a{flex:none;padding:11px 17px;border-radius:8px;background:var(--purple);color:#fff;font-size:11px;font-weight:800;text-decoration:none}.contact-cta>a:hover{background:var(--purple-dark)}.site-footer{padding:27px 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:.04em}.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:980px){.hero{padding:36px}.hero h1{font-size:39px}.workspace{grid-template-columns:minmax(0,1fr) minmax(290px,.83fr)}.form-card{padding:24px}.preview-card{padding:24px}.field-meta{display:block}.field-meta>span:first-child{max-width:none}.length-hint{display:block;margin-top:2px}.guide-grid{grid-template-columns:repeat(2,1fr)}}
@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:33px 29px}.hero-art{display:none}.hero h1{font-size:41px}.intro-strip{grid-template-columns:1fr 1fr}.workspace{grid-template-columns:1fr}.preview-card{border-left:0;border-top:1px solid var(--line)}.preview-panel{min-height:0}.code-top{align-items:start;flex-direction:column}.install,.faq{grid-template-columns:1fr;gap:22px}.faq{padding-top:56px}.contact-cta{align-items:start;flex-direction:column}.related{align-items:start;flex-direction:column}}
@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:28px 22px}.hero h1{font-size:32px}.hero-copy>p:not(.eyebrow){font-size:13px}.intro-strip{grid-template-columns:1fr;gap:11px}.section-heading{padding:23px}.section-chip{display:none}.form-card,.preview-card{padding:20px}.two-fields{grid-template-columns:1fr;gap:0}.preview-tabs button{font-size:10px}.code-top{padding:22px}.code-toolbar{align-items:stretch;flex-direction:column}.code-toolbar>div{display:grid;grid-template-columns:1fr 1fr}.code-toolbar .primary-button{grid-column:1/-1}.code-section pre{padding:15px;font-size:10px}.guide{padding:52px 0}.guide-grid{grid-template-columns:1fr}.install{padding:23px}.faq{padding-bottom:32px}.contact-cta{padding:23px;margin-bottom:45px}.contact-cta h2{font-size:23px}.contact-cta>a{width:100%;text-align:center}.site-footer .wrap{align-items:start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero-action,.primary-button,.secondary-button,.preview-tabs button{min-height:44px}