:root{--site-primary:#55c57a;--site-primary-light:#dcffdb;--site-primary-dark:#3fa864;--site-secondary:#2c3e50;--site-text:#333;--site-text-light:#666;--site-bg:#f8f9fa;--site-card:#fff;--site-border:#eaeaea;--site-shadow:#00000014;--site-info:#3498db;--site-warning:#f39c12;--site-danger:#e74c3c;--site-radius-sm:4px;--site-radius-md:8px;--site-radius-lg:12px}[data-theme=dark],[data-dark]{--site-primary:#8be9fd;--site-primary-light:#263c41;--site-primary-dark:#63b3d3;--site-secondary:#e0e0e0;--site-text:#f0f0f0;--site-text-light:#aaa;--site-bg:#121212;--site-card:#1e1e1e;--site-border:#333;--site-shadow:#00000080}:root{--primary:var(--site-primary);--primary-light:var(--site-primary-light);--primary-dark:var(--site-primary-dark);--secondary:var(--site-secondary);--text:var(--site-text);--text-light:var(--site-text-light);--bg:var(--site-bg);--card:var(--site-card);--border:var(--site-border);--shadow:var(--site-shadow);--success:#2ecc71;--warning:#f39c12;--danger:#e74c3c;--info:#3498db;--font-heading:"Kanit", sans-serif;--font-body:"Kanit", sans-serif;--font-code:"Fira Code", monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-round:999px;--transition-fast:.2s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}[data-theme=dark]{--primary:var(--site-primary);--primary-light:var(--site-primary-light);--primary-dark:var(--site-primary-dark);--secondary:var(--site-secondary);--text:var(--site-text);--text-light:var(--site-text-light);--bg:var(--site-bg);--card:var(--site-card);--border:var(--site-border);--shadow:var(--site-shadow)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}body{font-family:var(--font-body);background-color:var(--bg);color:var(--text);transition:background-color var(--transition-normal), color var(--transition-normal);width:100%;min-width:0;min-height:100vh;line-height:1.6;overflow-x:hidden}#app{width:100%;min-width:0}.crawler-nav{width:1px;height:1px;position:absolute;top:auto;left:-10000px;overflow:hidden}a{color:var(--primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary-dark)}img{max-width:100%;height:auto;display:block}button{font-family:var(--font-body);cursor:pointer;background:0 0;border:none}.madeitpx-page{--madeitpx-blue:#3e5cff;--madeitpx-violet:#7850f0;--madeitpx-pink:#eb46aa;--madeitpx-font-mono:"Fira Code", monospace;width:min(1120px,100%);margin:0 auto;padding:22px}.madeitpx-page main{padding-bottom:36px}.madeitpx-page a{color:inherit}.madeitpx-header{border-bottom:1px solid var(--site-border);justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;padding:8px 0 14px;display:flex}.madeitpx-brand{color:var(--site-text);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.madeitpx-brand img{object-fit:contain;width:42px;height:42px}.madeitpx-brand span{letter-spacing:-.035em;font-size:1.3rem;font-weight:700}.madeitpx-header-actions{align-items:center;gap:10px;display:flex}.madeitpx-projects-link,.madeitpx-theme-toggle{border:1px solid var(--site-border);background:var(--site-card);min-height:40px;color:var(--site-text);font:inherit;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:8px 13px;font-size:.86rem;font-weight:600;text-decoration:none;display:inline-flex}.madeitpx-projects-link:hover,.madeitpx-theme-toggle:hover{border-color:var(--madeitpx-violet);color:var(--madeitpx-violet)}.madeitpx-theme-toggle{cursor:pointer;width:42px;padding:0;font-size:1.1rem}.madeitpx-hero{border:1px solid var(--site-border);background:radial-gradient(ellipse at 92% 10%, color-mix(in srgb, var(--madeitpx-violet) 14%, transparent), transparent 42%), var(--site-card);box-shadow:0 18px 54px var(--site-shadow);border-radius:22px;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:clamp(24px,6vw,72px);padding:clamp(28px,6vw,68px);display:grid;position:relative;overflow:hidden}.madeitpx-hero-copy{z-index:1;position:relative}.madeitpx-eyebrow{color:var(--madeitpx-violet);font-family:var(--madeitpx-font-mono);letter-spacing:.1em;align-items:center;gap:9px;margin:0 0 14px;font-size:.7rem;font-weight:500;display:flex}.madeitpx-eyebrow span{background:linear-gradient(135deg, var(--madeitpx-blue), var(--madeitpx-pink));width:8px;height:8px;box-shadow:0 0 16px color-mix(in srgb, var(--madeitpx-pink) 70%, transparent);border-radius:2px}.madeitpx-hero h1{max-width:700px;color:var(--site-text);letter-spacing:-.045em;margin:0;font-size:clamp(2.5rem,6.5vw,5rem);font-weight:700;line-height:1.03}.madeitpx-hero h1 span{color:#0000;background:linear-gradient(95deg, var(--madeitpx-blue), var(--madeitpx-violet) 55%, var(--madeitpx-pink));-webkit-background-clip:text;background-clip:text}.madeitpx-intro{max-width:610px;color:var(--site-text-light);margin:22px 0 0;font-size:1.05rem}.madeitpx-actions{flex-wrap:wrap;gap:10px;margin-top:26px;display:flex}.madeitpx-button{border:1px solid var(--site-border);background:var(--site-card);min-height:44px;color:var(--site-text);border-radius:8px;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:.92rem;font-weight:600;text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s;display:inline-flex}.madeitpx-button:hover{border-color:var(--madeitpx-violet);transform:translateY(-2px)}.madeitpx-button-primary{background:linear-gradient(105deg, var(--madeitpx-blue), var(--madeitpx-violet));box-shadow:0 8px 24px color-mix(in srgb, var(--madeitpx-violet) 28%, transparent);border-color:#0000;color:#fff!important}.madeitpx-button-primary:hover{box-shadow:0 12px 30px color-mix(in srgb, var(--madeitpx-violet) 40%, transparent)}.madeitpx-tags{flex-wrap:wrap;gap:8px;margin-top:24px;display:flex}.madeitpx-tags span{border:1px solid var(--site-border);color:var(--site-text-light);font-family:var(--madeitpx-font-mono);border-radius:5px;padding:4px 9px;font-size:.68rem}.madeitpx-preview-card{border:1px solid color-mix(in srgb, var(--madeitpx-violet) 28%, var(--site-border));background:linear-gradient(135deg, color-mix(in srgb, var(--madeitpx-blue) 6%, transparent), transparent 55%), color-mix(in srgb, var(--site-bg) 75%, var(--site-card));border-radius:16px;flex-direction:column;justify-content:center;gap:12px;min-width:0;padding:22px;display:flex;position:relative}.madeitpx-comparison{z-index:1;aspect-ratio:1;border:1px solid color-mix(in srgb, var(--madeitpx-violet) 20%, var(--site-border));background:var(--site-bg);width:min(100%,430px);box-shadow:0 16px 38px var(--site-shadow);isolation:isolate;border-radius:20px;margin:auto;position:relative;overflow:hidden}.madeitpx-comparison-original,.madeitpx-comparison-result img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.madeitpx-comparison-result{z-index:1;clip-path:inset(0 0 0 var(--comparison-position));position:absolute;inset:0}.madeitpx-comparison-result img{image-rendering:pixelated}.madeitpx-comparison-size{z-index:2;background:color-mix(in srgb, var(--site-card) 94%, transparent);color:var(--site-text);box-shadow:0 2px 8px var(--site-shadow);border-radius:999px;padding:6px 11px;font-size:.72rem;font-weight:700;position:absolute;bottom:14px}.madeitpx-comparison-size-original{left:14px}.madeitpx-comparison-size-result{right:14px}.madeitpx-comparison-divider{z-index:2;top:0;bottom:0;left:var(--comparison-position);pointer-events:none;background:#fff;width:3px;position:absolute;transform:translate(-50%)}.madeitpx-comparison-divider span{background:var(--madeitpx-violet);color:#fff;border:3px solid #fff;border-radius:50%;place-items:center;width:38px;height:38px;font-size:1.2rem;font-weight:700;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.madeitpx-comparison-slider{z-index:3;opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.madeitpx-comparison:has(.madeitpx-comparison-slider:focus-visible){outline:3px solid var(--madeitpx-violet);outline-offset:4px}.madeitpx-preview-credit{z-index:1;color:var(--site-text-light);text-align:center;margin:0;font-size:.68rem;position:relative}.madeitpx-preview-credit a{color:var(--site-text);text-underline-offset:2px}.madeitpx-preview-card>span{z-index:1;color:var(--site-text-light);font-family:var(--madeitpx-font-mono);letter-spacing:.15em;text-align:center;font-size:.58rem;position:relative}.madeitpx-card-orbit{aspect-ratio:1;border:1px dashed color-mix(in srgb, var(--madeitpx-violet) 27%, transparent);border-radius:50%;width:68%;position:absolute}.madeitpx-demo{scroll-margin-top:20px}.madeitpx-demo-shell{border:1px solid var(--site-border);background:var(--site-card);box-shadow:0 18px 48px var(--site-shadow);border-radius:14px;grid-template-columns:minmax(240px,290px) minmax(0,1fr);display:grid;overflow:hidden}.madeitpx-controls{border-right:1px solid var(--site-border);background:color-mix(in srgb, var(--site-bg) 62%, var(--site-card));padding:18px}.madeitpx-control-section{border-bottom:1px solid var(--site-border);margin-bottom:15px;padding:2px 0 17px}.madeitpx-control-section:last-of-type{margin-bottom:0}.madeitpx-control-section h3{color:var(--site-text);margin:0 0 10px;font-size:.83rem;font-weight:600}.madeitpx-samples{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.madeitpx-sample-button{border:1px solid var(--site-border);background:var(--site-card);min-height:32px;color:var(--site-text-light);font:inherit;cursor:pointer;border-radius:6px;padding:5px;font-size:.72rem}.madeitpx-sample-button[aria-pressed=true]{border-color:var(--madeitpx-violet);color:var(--madeitpx-violet);background:color-mix(in srgb, var(--madeitpx-violet) 9%, var(--site-card))}.madeitpx-upload{border:1px dashed color-mix(in srgb, var(--madeitpx-violet) 55%, var(--site-border));min-height:38px;color:var(--madeitpx-violet);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:7px;margin-top:8px;font-size:.78rem;font-weight:600;display:flex}.madeitpx-upload:hover,.madeitpx-upload.is-dragging{background:color-mix(in srgb, var(--madeitpx-violet) 9%, var(--site-card))}.madeitpx-upload input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.madeitpx-upload:focus-within{outline:2px solid var(--madeitpx-violet);outline-offset:2px}.madeitpx-control-note{color:var(--site-text-light);text-align:center;margin:6px 0 0;font-size:.66rem}.madeitpx-dimension-fields{grid-template-columns:1fr 1fr;gap:9px;display:grid}.madeitpx-dimension-fields label{color:var(--site-text-light);grid-template-columns:1fr auto;align-items:center;gap:5px;font-size:.72rem;display:grid;position:relative}.madeitpx-dimension-fields label span{color:var(--site-text-light);font-size:.65rem}.madeitpx-dimension-fields input,.madeitpx-control-section select{border:1px solid var(--site-border);background:var(--site-card);width:100%;min-height:36px;color:var(--site-text);font:inherit;border-radius:6px;grid-column:1/-1;padding:6px 9px;font-size:.78rem}.madeitpx-select-label{color:var(--site-text-light);margin:0 0 6px;font-size:.72rem;display:block}.madeitpx-control-section select{margin-bottom:12px}.madeitpx-control-section select:last-child{margin-bottom:0}.madeitpx-range-label{color:var(--site-text-light);justify-content:space-between;gap:8px;margin:0 0 4px;font-size:.72rem;display:flex}.madeitpx-range-label output{color:var(--site-text);font-variant-numeric:tabular-nums}.madeitpx-control-section input[type=range]{width:100%;accent-color:var(--madeitpx-violet);margin:5px 0 10px}.madeitpx-control-section input[type=range]:disabled{opacity:.45}.madeitpx-checkbox{color:var(--site-text-light);cursor:pointer;align-items:center;gap:8px;font-size:.72rem;display:flex}.madeitpx-checkbox input{width:15px;height:15px;accent-color:var(--madeitpx-violet);margin:0}.madeitpx-color-control{color:var(--site-text-light);justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px;font-size:.72rem;display:flex}.madeitpx-color-control input{border:1px solid var(--site-border);background:var(--site-card);cursor:pointer;border-radius:5px;width:36px;height:27px;padding:2px}.madeitpx-demo-error{border:1px solid color-mix(in srgb, #e74c3c 35%, var(--site-border));background:color-mix(in srgb, #e74c3c 8%, var(--site-card));color:#c0392b;border-radius:6px;padding:9px;font-size:.75rem}.madeitpx-results{min-width:0;padding:16px}.madeitpx-result-heading{color:var(--site-text);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:.78rem;font-weight:600;display:flex}.madeitpx-result-heading>span:last-child{color:var(--site-text-light);text-align:right;font-size:.7rem;font-weight:400}.madeitpx-canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.madeitpx-image-credit{color:var(--site-text-light);text-align:right;margin:8px 0 0;font-size:.68rem}.madeitpx-image-credit a{color:var(--site-text);text-underline-offset:2px}.madeitpx-canvas-card{border:1px solid var(--site-border);background:var(--site-card);border-radius:8px;min-width:0;margin:0;overflow:hidden}.madeitpx-canvas-card figcaption{border-bottom:1px solid var(--site-border);color:var(--site-text);justify-content:space-between;gap:8px;padding:8px 10px;font-size:.7rem;display:flex}.madeitpx-canvas-card figcaption span:last-child{color:var(--site-text-light);font-family:var(--madeitpx-font-mono);font-size:.62rem}.madeitpx-canvas-frame{aspect-ratio:1;background-color:color-mix(in srgb, var(--site-bg) 84%, var(--site-card));background-image:linear-gradient(45deg, color-mix(in srgb, var(--site-border) 75%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--site-border) 75%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--site-border) 75%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--site-border) 75%, transparent) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;place-items:center;min-height:250px;display:grid;overflow:hidden}.madeitpx-canvas-frame canvas{object-fit:contain;width:100%;max-height:440px;display:block}.madeitpx-output-frame canvas{image-rendering:pixelated}.madeitpx-download-row{justify-content:space-between;align-items:center;gap:12px;padding-top:12px;display:flex}.madeitpx-download-row p{color:var(--site-text-light);margin:0;font-size:.72rem}.madeitpx-download-row .madeitpx-button{min-height:38px;padding:7px 11px;font-size:.77rem}.madeitpx-download-row .madeitpx-button:disabled{opacity:.5;cursor:wait;transform:none}.madeitpx-section{padding-top:78px}.madeitpx-section-heading{max-width:600px;margin-bottom:24px}.madeitpx-section-heading .madeitpx-eyebrow{margin-bottom:8px}.madeitpx-section-heading h2,.madeitpx-bottom-cta h2{color:var(--site-text);letter-spacing:-.035em;margin:0;font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.2}.madeitpx-section-heading>p:last-child,.madeitpx-bottom-cta>div>p:last-child{color:var(--site-text-light);margin:10px 0 0}.madeitpx-steps{border-top:1px solid var(--site-border);border-bottom:1px solid var(--site-border);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.madeitpx-steps article{border-right:1px solid var(--site-border);padding:22px 24px 24px}.madeitpx-steps article:first-child{padding-left:0}.madeitpx-steps article:last-child{border-right:0;padding-right:0}.madeitpx-step-number{color:var(--madeitpx-violet);font-family:var(--madeitpx-font-mono);font-size:.76rem}.madeitpx-steps h3{margin:13px 0 5px;font-size:1.15rem}.madeitpx-steps p{color:var(--site-text-light);margin:0;font-size:.9rem}.madeitpx-details{border:1px solid var(--site-border);background:var(--site-card);border-radius:12px;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:18px;margin-top:46px;padding:24px;display:grid}.madeitpx-details>div{align-items:flex-start;gap:14px;display:flex}.madeitpx-detail-icon{background:color-mix(in srgb, var(--madeitpx-blue) 12%, var(--site-card));width:38px;height:38px;color:var(--madeitpx-blue);font-family:var(--madeitpx-font-mono);border-radius:8px;flex:0 0 38px;place-items:center;font-size:.61rem;display:grid}.madeitpx-detail-icon-output{background:color-mix(in srgb, var(--madeitpx-pink) 12%, var(--site-card));color:var(--madeitpx-pink)}.madeitpx-details h2{margin:0 0 4px;font-size:.98rem}.madeitpx-details p{color:var(--site-text-light);margin:0;font-size:.85rem}.madeitpx-detail-arrow{color:var(--madeitpx-violet);text-align:center}.madeitpx-install{scroll-margin-top:24px}.madeitpx-install-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.madeitpx-install-card{border:1px solid var(--site-border);background:var(--site-card);border-radius:10px;min-width:0;padding:18px}.madeitpx-install-card:last-child:nth-child(odd){grid-column:1/-1}.madeitpx-install-heading{align-items:center;gap:12px;display:flex}.madeitpx-install-index{color:var(--madeitpx-violet);font-family:var(--madeitpx-font-mono);font-size:.7rem}.madeitpx-install-heading h3{margin:0;font-size:1rem;line-height:1.3}.madeitpx-install-heading div>span{color:var(--site-text-light);font-size:.75rem}.madeitpx-install-heading>a{border:1px solid var(--site-border);width:32px;height:32px;color:var(--site-text-light);border-radius:6px;place-items:center;margin-left:auto;text-decoration:none;display:grid}.madeitpx-install-heading>a:hover{border-color:var(--madeitpx-violet);color:var(--madeitpx-violet)}.madeitpx-command{border:1px solid var(--site-border);background:color-mix(in srgb, var(--site-bg) 80%, var(--site-card));border-radius:7px;align-items:center;gap:12px;min-height:52px;margin-top:14px;padding:9px 10px 9px 12px;display:flex}.madeitpx-command pre{flex:1;min-width:0;margin:0;overflow-x:auto}.madeitpx-command code{color:var(--site-text);font-family:var(--madeitpx-font-mono);white-space:pre;font-size:.74rem}.madeitpx-copy{border:1px solid var(--site-border);background:var(--site-card);color:var(--site-text-light);font:inherit;border-radius:5px;flex:none;padding:6px 9px;font-size:.72rem}.madeitpx-copy:hover{border-color:var(--madeitpx-violet);color:var(--madeitpx-violet)}.madeitpx-install-card>p{color:var(--site-text-light);margin:9px 0 0;font-size:.78rem}.madeitpx-copy-status{min-height:1.4em;color:var(--site-text-light);margin:8px 0 0;font-size:.8rem}.madeitpx-faq-list{border-top:1px solid var(--site-border)}.madeitpx-faq-list details{border-bottom:1px solid var(--site-border);padding:17px 5px}.madeitpx-faq-list summary{color:var(--site-text);cursor:pointer;justify-content:space-between;align-items:center;gap:18px;font-size:.97rem;font-weight:600;list-style:none;display:flex}.madeitpx-faq-list summary::-webkit-details-marker{display:none}.madeitpx-faq-list summary span{color:var(--madeitpx-violet);font-size:1.25rem;font-weight:400;transition:transform .16s}.madeitpx-faq-list details[open] summary span{transform:rotate(45deg)}.madeitpx-faq-list details>p{max-width:820px;color:var(--site-text-light);margin:10px 32px 0 0;font-size:.9rem}.madeitpx-bottom-cta{border:1px solid color-mix(in srgb, var(--madeitpx-violet) 30%, var(--site-border));background:linear-gradient(110deg, color-mix(in srgb, var(--madeitpx-blue) 8%, var(--site-card)), var(--site-card) 70%);border-radius:14px;justify-content:space-between;align-items:center;gap:24px;margin-top:56px;padding:clamp(22px,5vw,38px);display:flex}.madeitpx-bottom-cta .madeitpx-eyebrow{margin-bottom:8px}.madeitpx-bottom-cta .madeitpx-button{flex:none}.madeitpx-footer{border-top:1px solid var(--site-border);color:var(--site-text-light);justify-content:space-between;gap:12px;padding:20px 0 8px;font-size:.82rem;display:flex}.madeitpx-footer a{text-decoration:none}.madeitpx-footer a:hover{color:var(--madeitpx-violet)}@media (width<=760px){.madeitpx-page{padding:14px}.madeitpx-demo-shell{grid-template-columns:1fr}.madeitpx-controls{border-right:0;border-bottom:1px solid var(--site-border)}.madeitpx-canvas-frame{min-height:180px}.madeitpx-hero{grid-template-columns:1fr;padding:30px 24px}.madeitpx-preview-card{padding:14px}.madeitpx-section{padding-top:58px}.madeitpx-steps{grid-template-columns:1fr}.madeitpx-steps article,.madeitpx-steps article:first-child,.madeitpx-steps article:last-child{border-right:0;border-bottom:1px solid var(--site-border);padding:18px 0}.madeitpx-steps article:last-child{border-bottom:0}.madeitpx-details{grid-template-columns:1fr}.madeitpx-detail-arrow{transform:rotate(90deg)}.madeitpx-bottom-cta{flex-direction:column;align-items:flex-start}}@media (width<=540px){.madeitpx-brand img{width:36px;height:36px}.madeitpx-brand span{font-size:1.1rem}.madeitpx-projects-link{min-height:38px;padding:7px 10px}.madeitpx-theme-toggle{width:38px;min-height:38px}.madeitpx-controls,.madeitpx-results{padding:13px}.madeitpx-canvas-grid{gap:7px}.madeitpx-canvas-frame{min-height:120px}.madeitpx-download-row{flex-direction:column;align-items:flex-start}.madeitpx-install-grid{grid-template-columns:1fr}.madeitpx-install-card:last-child:nth-child(odd){grid-column:auto}.madeitpx-footer{flex-direction:column}}@media (prefers-reduced-motion:reduce){.madeitpx-page *,.madeitpx-page :before,.madeitpx-page :after{scroll-behavior:auto!important;transition-duration:.01ms!important}}