:root{--purple:#6b30b3;--purple-dark:#4e2088;--ink:#292233;--muted:#706779;--line:#e8e1ed;--pale:#f5effb;--bg:#fcfbfd;--shadow:0 16px 42px rgba(59,28,81,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}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 #b580e4;outline-offset:3px}.wrap{width:min(1200px,calc(100% - 44px));margin-inline:auto}.skip-link{position:absolute;left:14px;top:-70px;padding:10px 14px;background:#fff;z-index:20;border-radius:8px}.skip-link:focus{top:10px}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand,.brand-name{display:flex;align-items:center;gap:10px}.brand-name{color:var(--ink);text-decoration:none;letter-spacing:.04em;font-size:16px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--purple);border-radius:9px;color:#fff;font-size:18px;font-weight:900}.brand-separator{width:1px;height:22px;background:#d9cce4}.brand-tools{font-weight:800;text-decoration:none}.site-header nav{display:flex;align-items:center;gap:24px}.site-header nav a{font-size:12px;font-weight:700;text-decoration:none;color:#5d5266}.site-header nav a:hover,.site-header nav .all-tools{color:var(--purple)}.breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#8c8292;font-size:11px;margin:21px 0 25px}.breadcrumb a{color:#746b7d;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.08fr .92fr;align-items:center;gap:34px;min-height:345px;padding:40px 50px;border-radius:20px;background:radial-gradient(circle at 75% 45%,#8955bb 0,#6732a5 50%,#431777 100%);color:#fff;overflow:hidden}.hero .eyebrow{color:#e6d2fc}.hero h1{font-size:clamp(33px,4.2vw,53px);line-height:1.12;letter-spacing:-.045em;margin:0}.hero h1 span{display:block;color:#efd49a;font-size:.72em;letter-spacing:-.03em;margin-top:4px}.hero p:not(.eyebrow){max-width:620px;margin:18px 0;color:#f1eaf8;font-size:15px}.hero-points{display:flex;gap:8px 17px;flex-wrap:wrap;font-size:11px;font-weight:750}.hero-action{display:inline-flex;margin-top:23px;padding:10px 16px;border-radius:9px;background:#fff;color:var(--purple-dark);text-decoration:none;font-size:12px;font-weight:850}.hero-action:hover{background:#f6edff}.hero-art{display:flex;align-items:center;justify-content:center;min-width:0}.art-card{position:relative;width:min(415px,100%);border:1px solid #ffffff66;border-radius:14px;overflow:hidden;background:#231a34;box-shadow:0 24px 50px #2e0d5775;transform:rotate(-2deg)}.art-top{height:38px;background:#eee8f4;display:flex;align-items:center;gap:5px;padding:0 13px}.art-top i{width:7px;height:7px;border-radius:50%;background:#d3c6dd}.art-top i:first-child{background:#e4a2a9}.art-top i:nth-child(2){background:#e7c786}.art-top span{margin-left:auto;color:#6c5f79;font:10px ui-monospace,monospace}.art-code{padding:21px 24px;color:#e7d9ee;font:11px/2 ui-monospace,monospace;white-space:nowrap}.art-code span{display:block;padding-left:20px}.art-code em{font-style:normal}.art-code b{color:#e7b8ff;font-weight:500}.art-code i{color:#bfe9cd;font-style:normal}.art-ok{margin:0 23px 21px;padding:8px 12px;width:max-content;background:#d9f2df;color:#246c42;border-radius:7px;font-size:10px;font-weight:800}.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:25px 0 31px}.intro-strip div{display:flex;align-items:center;gap:12px}.intro-strip b{display:grid;place-items:center;background:#eee5f7;color:var(--purple);width:34px;height:34px;border-radius:8px;font-size:10px}.intro-strip span{font-size:12px;font-weight:700}.generator{border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow);scroll-margin-top:20px;overflow:hidden}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:29px 32px 21px}.section-heading h2{font-size:clamp(26px,3vw,35px);letter-spacing:-.035em;line-height:1.2;margin:0 0 6px}.section-heading p:last-child{color:var(--muted);margin:0}.live-pill{white-space:nowrap;background:#e8f8ed;color:#277649;border-radius:20px;padding:7px 11px;font-size:9px;font-weight:850;letter-spacing:.08em}.mode-tabs{display:flex;gap:9px;padding:0 32px 23px;border-bottom:1px solid var(--line)}.mode-tabs button{flex:1;max-width:235px;border:1px solid #ded3e7;border-radius:10px;background:#fff;color:#594967;padding:11px 16px;font-weight:800;font-size:12px}.mode-tabs button:hover{background:#fbf7ff}.mode-tabs button.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 7px 17px #6b30b326}.type-section{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:27px 32px 16px}.type-section h3{font-size:17px;margin:0}.type-section p{margin:2px 0 0;color:var(--muted);font-size:12px}.type-section>span{white-space:nowrap;color:var(--purple);font-size:10px;font-weight:850;letter-spacing:.09em}.type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:0 32px 19px}.type-card{min-width:0;min-height:75px;border:1px solid #e5dce9;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:6px;text-align:left;padding:10px 12px;color:#4d4159}.type-card:hover{border-color:#c6a6df;background:#fcf8ff}.type-card.active{border-color:var(--purple);background:#f6effc;box-shadow:inset 0 0 0 1px #6b30b330}.type-card .type-icon{font-size:17px;color:var(--purple);font-weight:850;line-height:1}.type-card strong{font-size:11px;line-height:1.2;overflow-wrap:anywhere}.type-info{display:flex;align-items:center;gap:12px;margin:0 32px 24px;padding:11px 13px;background:#f9f5fc;border-left:3px solid #ad7bd0;border-radius:5px;color:#63566c;font-size:11px}.type-info strong{color:#4e2c72;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}.form-card,.output-card{min-width:0;padding:28px 30px}.form-card{border-right:1px solid var(--line)}.card-heading{margin-bottom:21px}.card-heading h3,.validator-card h3,.validator-result h3{font-size:21px;letter-spacing:-.03em;margin:0 0 4px}.card-heading p:last-child,.validator-card>p:not(.eyebrow),.validator-result>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0}.dynamic-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 13px}.field{min-width:0;margin:0 0 15px}.field:has(textarea),.field:has(input[type=url]),.field:has(input[type=datetime-local]){grid-column:1/-1}.field label,.validator-card label{display:block;color:#44384c;font-size:11px;font-weight:800;margin:0 0 6px}.field input,.field select,.field textarea,.validator-card textarea{display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid #dcd1e4;background:#fff;border-radius:8px;color:#292134;font-size:12px}.field textarea{resize:vertical;min-height:84px}.field input:focus,.field select:focus,.field textarea:focus,.validator-card textarea:focus{border-color:#8d55bd;box-shadow:0 0 0 3px #6b30b319;outline:0}.field-help{display:block;color:#82768b;font-size:10px;margin-top:5px}.checkbox-field{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.checkbox-field label{margin:0}.checkbox-field input{width:18px;height:18px;min-height:18px;order:-1}.repeat-section{border-top:1px solid var(--line);padding-top:19px}.repeat-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.repeat-heading h4{font-size:15px;margin:0}.repeat-heading p{font-size:11px;color:var(--muted);margin:2px 0 0}.repeat-list{display:grid;gap:11px}.repeat-card{padding:15px;border:1px solid #e3d9e9;border-radius:10px;background:#fdfbfe}.repeat-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}.repeat-card-head strong{font-size:12px}.repeat-actions{display:flex;gap:5px}.small-button{border:1px solid #dbd0e5;background:#fff;border-radius:6px;padding:4px 8px;color:var(--purple);font-size:11px;font-weight:800}.small-button:hover:not(:disabled){background:#f2e9fb}.small-button:disabled{opacity:.35;cursor:not-allowed}.form-actions,.output-actions,.validator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;border:1px solid transparent;border-radius:9px;padding:9px 14px;text-decoration:none;font-size:11px;font-weight:850;line-height:1.3;text-align:center}.primary-button{background:var(--purple);color:#fff}.primary-button:hover:not(:disabled){background:var(--purple-dark)}.secondary-button{border-color:#ded3e8;background:#fff;color:var(--purple)}.secondary-button:hover:not(:disabled){background:#f8f2fd}.primary-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed}.output-card{background:#fefcff}.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#2c2238;color:#c2afcf;border-radius:10px 10px 0 0;padding:10px 14px;font:10px ui-monospace,monospace}.status-chip{border-radius:20px;background:#70577e;color:#fff;padding:4px 8px;font:800 9px Inter,system-ui,sans-serif}.status-chip.error{background:#903347}.status-chip.warning{background:#a0641d}.status-chip.valid{background:#276c4a}.output-card pre{margin:0;min-height:240px;max-height:610px;overflow:auto;border-radius:0 0 10px 10px;background:#211a2b;color:#eee2f7;padding:19px;font-size:11px;line-height:1.65;white-space:pre;tab-size:2;user-select:text}.output-actions{margin:13px 0 4px}.action-feedback{min-height:18px;color:#5d2f88;font-size:11px;margin:8px 0}.validation-panel{margin-top:16px;padding:15px;border:1px solid #e5dce9;border-radius:9px;background:#fff}.validation-summary{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}.validation-summary>span{padding:4px 7px;border-radius:6px;background:#f5f3f6;color:#685f6c;font-size:10px;font-weight:750}.validation-status{margin-right:4px;padding:5px 9px;border-radius:7px;font-size:11px}.validation-status.error{background:#fbe8e9;color:#9b3044}.validation-status.warning{background:#fff2d9;color:#875b1a}.validation-status.valid{background:#e7f5e9;color:#256f47}.issue-group{margin-top:10px;border-radius:7px;padding:10px 12px;font-size:11px}.issue-group h4{margin:0 0 5px;font-size:11px}.issue-group ul{padding-left:18px;margin:0}.issue-group li+li{margin-top:4px}.issue-group.error{background:#fff0f2;color:#92243d;border-left:3px solid #bf3951}.issue-group.warning{background:#fff8e9;color:#79591f;border-left:3px solid #bf8a31}.issue-group.info{background:#f2f0f9;color:#5e4b80;border-left:3px solid #8364af}.privacy-note{margin:15px 0 0;border-radius:7px;background:#f8f3fb;color:#6d5d75;padding:11px;font-size:10px}.validator-workspace{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:0}.validator-card,.validator-result{padding:29px 31px}.validator-card{border-right:1px solid var(--line)}.validator-card label{margin-top:20px}.validator-card textarea{min-height:340px;background:#211a2b;color:#f0e6f4;border-color:#392e45;font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;tab-size:2}.validator-card textarea::placeholder{color:#a28eae}.validator-actions{margin-top:12px}.validator-result{background:#fefcff}.empty-state{color:#8a7d90;font-size:12px;margin:0}.guide,.faq,.related{padding-top:68px}.guide h2,.faq h2{font-size:clamp(27px,3vw,37px);line-height:1.17;letter-spacing:-.035em;margin:0}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:23px 0}.guide-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.guide-grid span{font-size:11px;color:var(--purple);font-weight:850}.guide-grid h3{font-size:15px;margin:9px 0 6px}.guide-grid p{font-size:12px;color:#6b6471;margin:0}.guide-note{padding:21px 23px;background:#f7f2fb;border-left:3px solid #a87bd0;border-radius:8px}.guide-note strong{font-size:15px}.guide-note p{font-size:12px;color:#655b6e;margin:7px 0 0}.faq-list{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-top:22px}.faq details{border-bottom:1px solid var(--line);padding:0 20px}.faq details:last-child{border-bottom:0}.faq summary{cursor:pointer;padding:16px 0;font-size:13px;font-weight:750}.faq details p{font-size:12px;color:#685f70;margin:0 0 18px}.related{padding-bottom:60px}.related h2{font-size:23px;margin:0 0 16px}.related>div{display:flex;flex-wrap:wrap;gap:9px}.related a{padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:800;text-decoration:none}.related a:hover{background:#f7f0fc}.contact-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f1e8f8;border-radius:17px;padding:30px 35px;margin-bottom:65px}.contact-cta h2{font-size:24px;line-height:1.25;margin:0 0 7px}.contact-cta p:last-child{color:#64596d;margin:0;max-width:700px;font-size:12px}.contact-cta a{white-space:nowrap;background:var(--purple);color:#fff;border-radius:9px;padding:10px 15px;text-decoration:none;font-size:11px;font-weight:850}.contact-cta a:hover{background:var(--purple-dark)}.site-footer{border-top:1px solid var(--line);background:#fff}.footer-inner{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner strong{font-size:15px}.footer-inner strong span{color:var(--purple)}.footer-inner p{font-size:11px;color:#807789;margin:3px 0 0}.footer-inner nav{display:flex;gap:17px}.footer-inner nav a{font-size:11px;text-decoration:none;color:#685f70}.footer-inner nav a:hover{color:var(--purple)}
@media(max-width:1050px){.type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.hero{grid-template-columns:1fr;gap:20px}.hero-art{max-width:500px;margin:auto;width:100%}.workspace,.validator-workspace{grid-template-columns:1fr}.form-card,.validator-card{border-right:0;border-bottom:1px solid var(--line)}.type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-cta{display:block}.contact-cta a{display:inline-block;margin-top:17px}}
@media(max-width:560px){.wrap{width:min(100% - 28px,1200px)}.header-inner{min-height:62px}.site-header nav{gap:9px}.site-header nav a:not(.all-tools){display:none}.hero{padding:29px 23px;min-height:0}.hero h1{font-size:34px}.hero p:not(.eyebrow){font-size:13px}.hero-art{display:none}.intro-strip{grid-template-columns:1fr;gap:11px;padding:19px 0}.section-heading{display:block;padding:24px 20px 17px}.live-pill{display:inline-block;margin-top:11px}.mode-tabs{padding:0 20px 18px}.mode-tabs button{padding:10px 8px;font-size:11px}.type-section{padding:20px 20px 13px}.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 20px 16px}.type-card{min-height:67px}.type-info{margin:0 20px 20px}.form-card,.output-card,.validator-card,.validator-result{padding:23px 20px}.dynamic-fields{grid-template-columns:1fr}.field{grid-column:1/-1}.output-actions,.validator-actions{display:grid;grid-template-columns:1fr 1fr}.output-actions .primary-button,.validator-actions .primary-button{grid-column:1/-1}.guide,.faq,.related{padding-top:51px}.guide-grid{grid-template-columns:1fr}.contact-cta{padding:24px}.footer-inner{display:block;padding:22px 0}.footer-inner nav{margin-top:15px;flex-wrap:wrap}}
@media(max-width:360px){.type-grid{grid-template-columns:1fr 1fr}.type-card strong{font-size:10px}.mode-tabs button{font-size:10px}.output-actions,.validator-actions{grid-template-columns:1fr}.output-actions .primary-button,.validator-actions .primary-button{grid-column:auto}}