@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}.localized-page .project-intro h1{overflow-wrap:anywhere;max-width:26ch;line-height:1.35}html:lang(ja) .localized-page h1,html:lang(ja) .localized-page h2{letter-spacing:normal;font-family:Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif}html:lang(zh-Hans) .localized-page h1,html:lang(zh-Hans) .localized-page h2{letter-spacing:normal;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}.localized-page .tool-topbar{flex-wrap:wrap;gap:10px;height:auto;min-height:45px;padding-top:12px;padding-bottom:12px}.localized-related>div{flex-wrap:wrap;gap:12px;display:flex}.localized-related a{border:1px solid var(--line);padding:12px 16px;text-decoration:none;display:inline-block}.language-dropdown>div{width:180px}.language-dropdown summary{font-weight:600}.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;padding:26px 0 38px;font-size:11px}.footer-meta{justify-content:space-between;align-items:center;gap:20px;display:flex}.site-footer p{margin:0}.footer-badges{overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-color:#bdc8b8 transparent;scrollbar-width:thin;margin-top:22px;overflow-x:auto}.footer-badge-track{justify-content:center;align-items:center;gap:14px;width:max-content;min-width:100%;padding:6px 2px 12px;display:flex}.footer-badge-track>a{scroll-snap-align:start;flex:none;align-items:center;display:inline-flex}.footer-badge-track img{width:auto;max-width:220px;height:auto;max-height:54px;display:block}.footer-text-badge{border:1px solid var(--line);color:#627069;white-space:nowrap;border-radius:8px;min-height:44px;padding:0 16px;font-weight:700}@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}.footer-meta{flex-wrap:wrap}.footer-meta 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%}.footer-meta{gap:12px}}.tool-header{justify-content:space-between;gap:24px}.tool-header nav{flex-wrap:wrap;gap:22px;display:flex}.tool-header nav a{color:var(--muted);border-bottom:2px solid #0000;padding:10px 0;font-size:12px;text-decoration:none}.tool-header nav a:hover,.tool-header nav a[aria-current]{color:var(--ink);border-color:var(--orange)}.mc-intro h1{margin-bottom:16px}.mc-lead{max-width:720px;color:var(--muted);margin:0 0 28px;font-size:16px;line-height:1.65}.mc-canvas{justify-content:center;align-items:center;padding:30px 28px 50px;display:flex}.mc-canvas canvas{object-fit:contain;width:100%;height:auto;max-height:530px;position:static}.mc-file-input{opacity:0;width:1px;height:1px;position:absolute}.mc-file-input:focus-visible+.canvas-meta{outline:2px solid var(--lime)}.mc-canvas:focus-within{outline:2px solid var(--lime);outline-offset:-2px}.mc-presets{gap:7px;margin:8px 0 12px;display:flex}.mc-presets button{color:#dbe8de;background:#213c38;border:1px solid #47605a;flex:1;padding:7px;font:11px DM Mono,monospace}.mc-presets button[aria-pressed=true]{background:var(--lime);color:var(--dark);border-color:var(--lime)}.mc-swatches{grid-template-columns:repeat(16,1fr);gap:3px;margin:12px 0;display:grid}.mc-swatches i{border:1px solid #ffffff20;height:14px}.mc-toggle{position:relative}.mc-toggle input{opacity:0;width:32px;height:20px;margin:0;display:block;position:absolute;right:0}.mc-toggle:focus-within i{outline-offset:3px;outline:2px solid #fff}.mc-download>div{grid-template-columns:1fr 1fr}.mc-download button:last-child{background:#c3d9ca;grid-column:1/-1}.mc-download button:disabled{background:#60746b}.mc-error{color:#8c3323;background:#fff0e8;border:1px solid #ba543e;padding:15px 18px;font-size:14px}.mc-materials{margin-top:52px}.mc-materials-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px;display:flex}.mc-materials h2{letter-spacing:-1px;font-size:38px}.mc-materials-heading>p{color:var(--muted);margin:0;font:12px/1.6 DM Mono,monospace}.mc-table-scroll{border:1px solid var(--line);overflow-x:auto}.mc-material-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:13px}.mc-material-table th{text-align:left;background:#e9eadd;font-weight:600}.mc-material-table th,.mc-material-table td{border-bottom:1px solid var(--line);padding:13px 18px}.mc-material-table tbody tr:last-child td{border-bottom:0}.mc-material-table td:nth-child(n+3){font-family:DM Mono,monospace}.mc-material-table tfoot{background:#e9eadd;font-size:11px}.mc-material-table tfoot td{font-family:inherit}.mc-block-name{align-items:center;gap:12px;display:flex}.mc-block-name i{border:1px solid #192d2d33;width:24px;height:24px}.mc-block-name small{color:var(--muted);margin-top:4px;font:10px DM Mono,monospace;display:block}.mc-note{color:var(--muted);font-size:12px;line-height:1.6}.mc-empty{color:var(--muted);border:1px dashed #bac5ac;padding:26px;line-height:1.6}.mc-explainer p{color:var(--muted);line-height:1.7}.mc-explainer a,.related-tool a,.site-footer>a,.site-footer .footer-meta>a{color:#28715d}.mc-steps{color:var(--muted);margin:28px 0;padding-left:22px;line-height:1.7}.mc-steps li{margin-bottom:16px;padding-left:8px}.mc-steps strong{color:var(--ink)}.mc-faq .faq-grid{grid-template-columns:repeat(2,1fr)}.mc-faq .faq-grid details{border-left:0;padding:24px 28px 24px 0}.mc-faq .faq-grid details:nth-child(2n){border-left:1px solid var(--line);padding-left:28px}.related-tool{background:#eaf0dc;border:1px solid #c9d2bd;margin-bottom:65px;padding:26px}.related-tool h2{letter-spacing:-1px;max-width:650px;font-size:34px;line-height:1.15}.related-tool>p:last-child{max-width:720px;color:var(--muted);margin-bottom:0;line-height:1.7}@media (max-width:800px){.tool-header{flex-wrap:wrap;gap:12px;padding:18px 0}.tool-header nav{gap:18px}.mc-canvas{min-height:350px;padding:24px 20px 48px}.mc-canvas canvas{max-height:380px}.mc-materials-heading{display:block}.mc-materials-heading>p{margin-top:16px}.mc-faq .faq-grid{grid-template-columns:1fr}.mc-faq .faq-grid details,.mc-faq .faq-grid details:nth-child(2n){border-left:0;padding:20px 0}.related-tool{padding:22px}}.tools-dropdown{color:var(--muted);font-size:12px;position:relative}.tools-dropdown summary{cursor:pointer;white-space:nowrap;border-bottom:2px solid #0000;padding:10px 0;list-style:none}.tools-dropdown summary::-webkit-details-marker{display:none}.tools-dropdown summary:after{content:" ▾";font-size:10px}.tools-dropdown[data-current=true] summary{color:var(--ink);border-color:var(--orange)}.tools-dropdown>div{z-index:30;background:#faf8ee;border:1px solid #bcc8ad;width:265px;max-width:calc(100vw - 32px);padding:10px;position:absolute;top:100%;right:0;box-shadow:5px 5px #1b352c22}.tool-header .tools-dropdown>div a{border:0;padding:10px 12px;font-size:12px;display:block}.tool-header .tools-dropdown>div a:hover,.tool-header .tools-dropdown>div a[aria-current]{background:#e7eed9}.tools-dropdown summary:focus-visible{outline-offset:4px;outline:2px solid #ba523a}@media (max-width:480px){.tool-header nav{gap:14px}.tool-header nav>a,.tools-dropdown{font-size:11px}}