:root{--paper:#f7f3e9;--ink:#181714;--accent:#ff4d4d;--accent-dark:#d83a3a;--teal:#1bd98e;--yellow:#ffd447;--navy:#2d5bff;--white:#fffaf2;--shadow:#18171447;--pixel:16px}*{box-sizing:border-box}body{color:var(--ink);background-color:var(--paper);background-image:linear-gradient(180deg,#fff3d1 0%,#f7f3e9 48%,#f1e3d5 100%),repeating-linear-gradient(0deg,#1817140f 0 1px,transparent 1px var(--pixel)),repeating-linear-gradient(90deg,#1817140f 0 1px,transparent 1px var(--pixel));background-attachment:fixed;min-height:100vh;margin:0;font-family:Bricolage Grotesque,Trebuchet MS,sans-serif}body:before{content:"";pointer-events:none;z-index:0;opacity:.7;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><rect width='48' height='48' fill='none'/><rect x='6' y='6' width='3' height='3' fill='%23181714' opacity='0.12'/><rect x='30' y='18' width='2' height='2' fill='%23181714' opacity='0.12'/><rect x='18' y='34' width='3' height='3' fill='%23181714' opacity='0.12'/></svg>");position:fixed;inset:0}.page{z-index:1;max-width:1200px;margin:0 auto;padding:28px 24px 60px;position:relative}.site-header{justify-content:space-between;align-items:center;gap:20px;padding:8px 4px 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-logo{width:auto;height:46px;display:block}.brand-mark{background:var(--navy);color:var(--white);box-shadow:3px 3px 0 var(--ink);border-radius:6px;padding:6px 10px;font-size:14px;display:inline-flex}.brand-name{text-transform:uppercase;font-size:16px}.site-nav{text-transform:uppercase;letter-spacing:.8px;gap:18px;font-size:13px;font-weight:700;display:flex}.site-nav a,.site-footer a{color:var(--ink);text-decoration:none}.site-nav a:hover,.site-footer a:hover{color:var(--accent-dark)}.btn{border:3px solid var(--ink);background:var(--white);color:var(--ink);text-transform:uppercase;letter-spacing:.8px;cursor:pointer;box-shadow:5px 5px 0 var(--ink);border-radius:6px;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}.btn:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(0)}.btn-primary{background:var(--accent);color:var(--white)}.btn-ghost{background:0 0}.btn-outline{background:var(--white);border-color:var(--navy)}.btn-small{padding:8px 14px;font-size:12px}.btn-icon{justify-content:center;align-items:center;min-width:68px;height:34px;padding:0;display:inline-flex}.btn-icon:before{content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;width:48px;height:16px;display:block}.btn-icon[data-action=prev]:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='16' viewBox='0%200%2052%2016'><text x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Pixelify%20Sans,%20Trebuchet%20MS,%20sans-serif' font-size='12' font-weight='700' fill='%23181714'>PREV</text></svg>")}.btn-icon[data-action=next]:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='16' viewBox='0%200%2052%2016'><text x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Pixelify%20Sans,%20Trebuchet%20MS,%20sans-serif' font-size='12' font-weight='700' fill='%23181714'>NEXT</text></svg>")}.btn-icon[data-action=rand]{min-width:90px}.btn-icon[data-action=rand]:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='16' viewBox='0%200%2072%2016'><text x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Pixelify%20Sans,%20Trebuchet%20MS,%20sans-serif' font-size='12' font-weight='700' fill='%23181714'>RANDOM</text></svg>");width:72px}.share-row{flex-wrap:wrap;gap:8px;display:flex}.share-btn{color:var(--ink);border-radius:6px;justify-content:center;align-items:center;width:44px;height:34px;padding:0;display:inline-flex}.share-icon{fill:currentColor;width:24px;height:24px;display:block}.hero{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;gap:32px;margin-bottom:40px;display:grid}.hero-copy{gap:18px;animation:.8s both rise;display:grid}.kicker{text-transform:uppercase;letter-spacing:2px;color:var(--navy);font-size:12px;font-weight:700}.hero h1{margin:0;font-family:Pixelify Sans,Trebuchet MS,sans-serif;font-size:clamp(32px,4vw,46px)}.lead{max-width:520px;margin:0;font-size:18px;line-height:1.6}.hero-actions{flex-wrap:wrap;gap:12px;display:flex}.hero-badges{flex-wrap:wrap;gap:10px;display:flex}.hero-ph{margin-top:12px}.hero-ph a{display:inline-block}.badge{border:2px solid var(--ink);text-transform:uppercase;letter-spacing:.6px;background:var(--white);box-shadow:3px 3px 0 var(--ink);border-radius:6px;padding:8px 12px;font-size:12px;font-weight:700}.hero-grid{grid-template-columns:repeat(2,minmax(120px,1fr));gap:16px;display:grid}.sample-card,.gallery-item{background:var(--white);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);cursor:pointer;border-radius:10px;place-items:center;min-height:140px;padding:14px;transition:transform .2s;display:grid;position:relative}.sample-card:hover,.gallery-item:hover{transform:translate(-4px,-4px)}.sample-card svg,.gallery-item svg{image-rendering:pixelated;width:100%;height:auto}.builder{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-bottom:50px;display:grid}.builder-preview{gap:16px;display:grid}.preview-frame{background:var(--white);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background-image:repeating-linear-gradient(0deg,#1817140f 0 1px,#0000 1px 24px),repeating-linear-gradient(90deg,#1817140f 0 1px,#0000 1px 24px);border-radius:12px;padding:18px}#avatar{shape-rendering:crispedges;image-rendering:pixelated;width:100%;height:auto;display:block}.preview-actions{gap:12px;display:grid}.export-panel{border:2px dashed var(--ink);box-shadow:6px 6px 0 var(--ink);background:#ffffffe6;border-radius:12px;gap:12px;padding:14px;display:grid}.export-row{grid-template-columns:1fr auto;align-items:center;gap:12px;display:grid}.toggle{text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:8px;font-size:12px;font-weight:700;display:inline-flex}.toggle input{accent-color:var(--navy);width:18px;height:18px}.export-size{text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:10px;font-size:12px;font-weight:700;display:inline-flex}.export-row .btn{justify-self:end;min-width:150px}select{border:3px solid var(--ink);background:var(--white);border-radius:6px;padding:8px 12px;font-weight:700}.seed{color:var(--navy);font-size:13px;display:none}.builder-controls{border:3px dashed var(--ink);background:#ffffffd9;border-radius:12px;gap:14px;padding:20px;display:grid}.control-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.control-info{align-items:center;gap:12px;display:flex}.part-thumb{border:3px solid var(--ink);background:var(--white);box-shadow:4px 4px 0 var(--ink);border-radius:8px;place-items:center;width:64px;height:64px;display:grid}.part-thumb svg{image-rendering:pixelated;width:100%;height:100%;display:block}.control-label{text-transform:uppercase;letter-spacing:.8px;font-size:15px;font-weight:700}.control-actions{gap:8px;display:flex}.features{content-visibility:auto;contain-intrinsic-size:400px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:60px;display:grid}.feature-card{background:var(--white);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:12px;padding:18px}.feature-card h3{margin-top:0}.section-head{gap:10px;margin-bottom:20px;display:grid}.section-head h2{margin:0;font-family:Pixelify Sans,Trebuchet MS,sans-serif;font-size:clamp(26px,3vw,34px)}.gallery{content-visibility:auto;contain-intrinsic-size:700px;margin-bottom:70px}.gallery-section{gap:12px;margin-bottom:28px;display:grid}.gallery-section:last-child{margin-bottom:0}.gallery-section-head{gap:6px;display:grid}.gallery-section-head h3{margin:0;font-family:Pixelify Sans,Trebuchet MS,sans-serif;font-size:clamp(18px,2.6vw,22px)}.gallery-section-head p{margin:0;line-height:1.6}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;display:grid}.gallery-item{color:inherit;text-decoration:none}.gallery-note{color:var(--navy);margin-top:14px;font-weight:700}.rank-badge{border:2px solid var(--ink);background:var(--navy);color:var(--white);letter-spacing:.6px;box-shadow:2px 2px 0 var(--ink);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:700;position:absolute;top:8px;right:8px}.gallery-tag{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);text-transform:uppercase;letter-spacing:.6px;box-shadow:2px 2px 0 var(--ink);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:700;position:absolute;top:8px;left:8px}.how{content-visibility:auto;contain-intrinsic-size:520px;margin-bottom:60px}.use-cases{content-visibility:auto;contain-intrinsic-size:420px;margin-bottom:60px}.use-case-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.use-case-card{background:var(--white);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);color:inherit;border-radius:12px;gap:10px;padding:18px;text-decoration:none;transition:transform .2s;display:grid}.use-case-card:hover{transform:translate(-3px,-3px)}.use-case-card h3{margin:0}.use-case-card p{margin:0;line-height:1.6}.size-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.size-card{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff4df;border-radius:10px;padding:16px}.size-card h3{margin-top:0}.how-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;display:grid}.how-step{background:var(--white);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:12px;padding:18px}.step-number{color:var(--accent-dark);font-family:Pixelify Sans,Trebuchet MS,sans-serif;font-size:18px}.seo{background:var(--white);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);content-visibility:auto;contain-intrinsic-size:700px;border-radius:12px;margin-bottom:60px;padding:28px}.seo .section-head p{max-width:780px;margin:0;line-height:1.7}.seo-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px;display:grid}.seo-card{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff4df;border-radius:10px;padding:16px}.seo-card h3{margin-top:0}.seo-list{margin:12px 0 0;padding-left:18px;line-height:1.6}.seo-list a{color:var(--ink);border-bottom:2px solid #18171433;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s}.seo-list a:hover{color:var(--accent-dark);border-bottom-color:var(--accent-dark);background-color:#ff4d4d14}.seo-note{border:2px dashed var(--ink);background:#ffffffb3;border-radius:8px;margin-top:18px;padding:14px 16px;font-weight:700}.faq{content-visibility:auto;contain-intrinsic-size:520px;margin-bottom:60px}.faq-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;display:grid}details{background:var(--white);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:12px;padding:14px 16px}summary{cursor:pointer;font-weight:700}.site-footer{border-top:3px dashed var(--ink);justify-content:space-between;align-items:center;gap:20px;padding-top:18px;font-size:14px;display:flex}.footer-left{gap:6px;display:grid}.footer-right{gap:18px;display:flex}.simple-main{gap:18px;margin-bottom:60px;display:grid}.simple-hero{gap:12px;margin-bottom:10px;display:grid}.simple-hero h1{margin:0;font-family:Pixelify Sans,Trebuchet MS,sans-serif;font-size:clamp(30px,4vw,44px)}.simple-card{background:var(--white);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:12px;padding:18px}.simple-card h2{margin-top:0}.simple-actions{flex-wrap:wrap;gap:12px;margin-top:14px;display:flex}.note{color:var(--navy);font-size:13px;font-weight:700}#export-canvas{display:none}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media (max-width:760px){.site-header{flex-direction:column;align-items:flex-start}.site-nav{flex-wrap:wrap}.control-row{flex-direction:column;align-items:flex-start}.control-info{width:100%}.part-thumb{width:56px;height:56px}.preview-actions{gap:10px}.export-row{grid-template-columns:1fr;align-items:stretch}.export-row .btn{justify-self:stretch;width:100%}.footer-right{flex-wrap:wrap}}