@font-face{font-family:PixelPurl;src:url(/fonts/PixelPurl.ttf)format("truetype");font-display:swap}:root{--ink:#192d2d;--dark:#102324;--paper:#f7f3e9;--lime:#d9ff73;--orange:#f16b51;--line:#d8d4c9;--muted:#60706a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:radial-gradient(circle at 94% 4%,#e3f5ce 0 10%,transparent 27%),var(--paper);margin:0;font-family:DM Sans,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.container{width:min(1200px,100% - 48px);margin:0 auto}.site-header{align-items:center;min-height:86px;display:flex}.brand{color:var(--ink);letter-spacing:1.2px;align-items:center;gap:11px;font-family:PixelPurl,DM Mono,monospace;font-size:23px;font-weight:400;text-decoration:none;display:flex}.brand>span>span{color:#f05b44}.brand-logo{object-fit:contain;width:39px;height:39px;display:block}.converter{padding:24px 0 58px}h1{color:var(--ink);letter-spacing:1px;margin:0 0 22px;font-family:PixelPurl,DM Mono,monospace;font-size:clamp(28px,4vw,47px);font-weight:400;line-height:1.12}.eyebrow{color:#63716a;letter-spacing:1px;align-items:center;gap:9px;margin:0 0 13px;font:500 11px/1 DM Mono,monospace;display:flex}.eyebrow span{background:var(--orange);width:8px;height:8px;display:inline-block;transform:rotate(45deg)}h2{letter-spacing:-2.5px;margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;line-height:.98}.tool-shell{background:var(--dark);border:2px solid #173130;box-shadow:11px 12px #cad5bf}.tool-topbar{color:#aac2b8;letter-spacing:1.1px;border-bottom:1px solid #34504c;justify-content:space-between;align-items:center;height:42px;padding:0 15px;font:10px DM Mono,monospace;display:flex}.tool-topbar strong{color:#e7f0e7;font-weight:500}.tool-topbar>span:last-child{color:var(--lime)}.window-dots{gap:5px;display:flex}.window-dots i{background:#ee735b;border-radius:50%;width:7px;height:7px}.window-dots i:nth-child(2){background:#efcb66}.window-dots i:nth-child(3){background:#8fc097}.workspace{grid-template-columns:minmax(0,1.65fr) minmax(265px,.72fr);min-height:525px;display:grid}.canvas-area{background-color:#203b39;background-image:linear-gradient(45deg,#294745 25%,#0000 25%),linear-gradient(-45deg,#294745 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#294745 75%),linear-gradient(-45deg,#0000 75%,#294745 75%);background-position:0 0,0 13px,13px -13px,-13px 0;background-size:26px 26px;min-height:525px;position:relative;overflow:hidden}.canvas-area.dragging{outline:4px solid var(--lime);outline-offset:-4px}.canvas-area canvas{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}#fileInput{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.upload-panel{z-index:1;color:#eff8ec;text-align:center;cursor:pointer;background:#17312fdf;border:1px dashed #a1bcae;flex-direction:column;align-items:center;gap:8px;min-width:238px;padding:26px 28px;transition:all .15s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.upload-panel:hover{background:#244440;transform:translate(-50%,-50%)translateY(-3px)}.upload-mark{width:43px;height:43px;color:var(--lime);border:1px solid #b8d0c0;border-radius:50%;place-items:center;font-size:24px;display:grid}.upload-panel strong{margin-top:3px;font-size:16px}.upload-panel small{color:#bdd0c5;font-size:12px}.upload-panel b{color:#87a599;letter-spacing:.35px;margin-top:5px;font:9px/1.45 DM Mono,monospace}.canvas-meta{z-index:1;color:#d9eade;gap:7px;font:10px DM Mono,monospace;display:flex;position:absolute;bottom:12px;right:13px}.canvas-meta span{text-overflow:ellipsis;white-space:nowrap;background:#16302dd9;border:1px solid #4a655e;max-width:195px;padding:6px 8px;overflow:hidden}.controls{color:#eaf2eb;background:#142a28;padding:25px 20px 17px}.control-heading{color:#e8f2ea;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.control-heading output{color:var(--lime);font:10px DM Mono,monospace}input[type=range]{width:100%;accent-color:var(--lime);margin:13px 0 3px}.control-help{color:#9bb2a8;margin:0;font-size:10px;line-height:1.4}.control-divider{background:#38514d;height:1px;margin:20px 0}select{color:#eff7ee;background:#213c38;border:1px solid #47605a;border-radius:0;outline:none;width:100%;margin-top:11px;padding:10px;font-size:12px}.palette-preview{color:#a7bdb2;align-items:center;gap:8px;margin-top:10px;font-size:10px;display:flex}.palette-swatch{background:linear-gradient(90deg,#d9645f 0 25%,#e6c775 25% 50%,#5d9786 50% 75%,#826787 75%);width:29px;height:10px}.palette-swatch.pico{background:linear-gradient(90deg,#1d2b53 0 25%,#7e2553 25% 50%,#00e436 50% 75%,#ffec27 75%)}.palette-swatch.gameboy{background:linear-gradient(90deg,#0f380f 0 25%,#306230 25% 50%,#8bac0f 50% 75%,#9bbc0f 75%)}.palette-swatch.mono{background:linear-gradient(90deg,#181f1f 0 25%,#555f5a 25% 50%,#b1bab0 50% 75%,#f4f1e1 75%)}.toggle-row{color:#dbe8de;cursor:pointer;justify-content:space-between;align-items:center;font-size:12px;display:flex}.toggle-row input{display:none}.toggle-row i{background:#536962;border-radius:20px;width:31px;height:17px;display:block;position:relative}.toggle-row i:after{content:"";background:#d8e5dc;border-radius:50%;width:11px;height:11px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle-row input:checked+i{background:#b5dd5e}.toggle-row input:checked+i:after{background:#19322e;transform:translate(14px)}.tool-actions{gap:8px;margin:21px 0 14px;display:flex}.sample-button,.reset-button{color:#eaf5e9;background:#24413c;border:1px solid #587168;flex:1;padding:9px 7px;font-size:11px;font-weight:600}.sample-button:hover,.reset-button:hover{background:#31564e}.reset-button{color:#c4d6cc;background:0 0;flex:none}.download-box{opacity:.68;background:#102321;border:1px solid #3a544d;padding:15px}.download-box.active{opacity:1;border-color:#60836e}.download-box strong{font-size:12px}.download-box p{color:#9db4a9;min-height:27px;margin:6px 0 12px;font-size:10px;line-height:1.35}.download-box>div{grid-template-columns:1fr 1fr;gap:6px;display:grid}.download-box button{color:#17302d;background:var(--lime);border:0;padding:9px 5px;font-size:11px;font-weight:700}.download-box button+button{background:#e5ede2}.download-box button:disabled{cursor:not-allowed;color:#5c6b62;background:#60746b}.download-box small{color:#496058;margin-top:2px;font:8px DM Mono,monospace;display:block}.privacy-note{color:#92ab9e;text-align:center;margin:15px 0 0;font-size:10px}.quick-points{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);display:grid}.quick-points article{gap:15px;padding:25px 30px 25px 0;display:flex}.quick-points article+article{border-left:1px solid var(--line);padding-left:29px}.quick-points b{color:#e65f48;font:11px DM Mono,monospace}.quick-points div{flex-direction:column;gap:4px;display:flex}.quick-points strong{font-size:14px}.quick-points span{color:#63716a;font-size:12px}.how{max-width:840px;padding:99px 0 104px}.how h2{font-size:clamp(38px,5vw,58px)}.how>p:last-child{color:#5b6963;max-width:680px;margin:22px 0 0;font-size:16px;line-height:1.65}.how>p:nth-of-type(2){margin-top:12px}.seo-faq{padding:0 0 102px}.seo-faq h2{font-size:clamp(32px,4vw,48px)}.faq-grid{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;display:grid}.faq-grid details{border-bottom:1px solid var(--line);min-height:155px;padding:22px 25px 12px 0}.faq-grid details+details{border-left:1px solid var(--line);padding-left:25px}.faq-grid summary{color:var(--ink);cursor:pointer;font-size:14px;font-weight:700;line-height:1.35}.faq-grid p{color:#627069;margin:13px 0 0;font-size:13px;line-height:1.55}.site-footer{border-top:1px solid var(--line);color:#748077;justify-content:space-between;align-items:center;gap:20px;padding:26px 0 38px;font-size:11px;display:flex}.site-footer p{margin:0}@media (max-width:800px){.container{width:min(100% - 32px,650px)}.site-header{min-height:74px}.brand{font-size:20px}.brand-logo{width:35px;height:35px}.converter{padding:18px 0 48px}.tool-shell{box-shadow:7px 8px #cad5bf}.workspace{grid-template-columns:1fr}.canvas-area{min-height:380px}.controls{padding:21px 17px}.quick-points{grid-template-columns:1fr}.quick-points article,.quick-points article+article{border-left:0;border-bottom:1px solid var(--line);padding:19px 0}.quick-points article:last-child{border-bottom:0}.how{padding:72px 0 62px}.seo-faq{padding-bottom:78px}.faq-grid{grid-template-columns:1fr}.faq-grid details,.faq-grid details+details{border-left:0;min-height:0;padding:18px 0}.site-footer{flex-wrap:wrap}.site-footer p:last-child{width:100%}}@media (max-width:430px){.tool-topbar{padding:0 10px;font-size:8px}.canvas-area{min-height:330px}.upload-panel{min-width:210px;padding:22px 16px}.canvas-meta{justify-content:space-between;left:8px;right:8px}.canvas-meta span{max-width:53%}.site-footer{gap:12px}}