:root{--bg:#0d0f12;--panel:#171a1f;--line:#2a2f37;--text:#f5f7fa;--muted:#9da6b2;--accent:#d8ff4f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;min-height:65px;padding:18px clamp(20px,5vw,72px);background:rgba(13,15,18,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{font-weight:900;font-size:1.25rem}.site-header nav,.site-header nav a,footer nav{display:flex;gap:22px}.site-header nav a{color:var(--muted);font-size:.92rem}main{width:min(1180px,calc(100% - 36px));margin:auto}.hero{padding:90px 0 60px}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.2em}.hero h1{font-size:clamp(3rem,8vw,7rem);line-height:.93;letter-spacing:-.07em;margin:.3em 0}.hero>p:last-child{max-width:680px;color:var(--muted);font-size:1.12rem}.ad-slot{height:110px;border:1px dashed #3a424d;display:grid;place-items:center;color:#606a77;margin-bottom:36px}.content{padding:60px 0}.tool-directory{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.directory-card{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.directory-card:hover{border-color:var(--accent);transform:translateY(-2px)}.directory-card span,.feature-grid p,.article p,.article li{color:var(--muted)}.tool-card{display:grid;grid-template-columns:.8fr 1.4fr;gap:44px;padding:48px 0;border-top:1px solid var(--line)}.tool-number{color:var(--accent);font-weight:900}.tool-copy h2{font-size:2rem;letter-spacing:-.04em;margin:.2em 0}.tool-ui{background:var(--panel);padding:28px;border:1px solid var(--line);border-radius:18px}.drop-zone{display:grid;place-items:center;min-height:150px;border:1px dashed #4a525d;border-radius:12px;cursor:pointer;margin-bottom:10px}.drop-zone:hover{border-color:var(--accent)}.drop-zone input{display:none}.file-preview{margin:0 0 18px}.file-preview-summary,.file-preview-more,.file-summary{margin:0 0 8px;color:var(--muted);font-size:.86rem}.file-preview-grid,.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}.file-preview figure,.preview-grid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#101318}.file-preview img,.preview-grid img{display:block;width:100%;height:92px;object-fit:contain;background:repeating-conic-gradient(#1b1f25 0 25%,#111419 0 50%) 50%/16px 16px}.file-preview figcaption,.preview-grid figcaption{padding:6px 8px;color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}label{color:var(--muted);font-size:.9rem}input[type=number],select{display:block;min-width:90px;margin-top:6px;background:#0e1115;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px}.check-control{display:flex;align-items:center;gap:8px;padding:10px 0}.check-control input{width:18px;height:18px}button{background:var(--accent);color:#111;border:0;padding:12px 18px;border-radius:9px;font-weight:850;cursor:pointer}.secondary-button{background:#2a3038;color:var(--text);border:1px solid #3b434e}.status{min-height:1.4em;color:var(--muted)}.output-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.frame{background:#0f1216;border:1px solid var(--line);padding:8px;border-radius:10px}.frame img{width:100%;image-rendering:pixelated}.frame a{display:block;text-align:center;margin-top:6px;color:var(--accent);font-size:.82rem}.palette-output{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:18px}.swatch{min-height:100px;border-radius:10px;padding:12px;display:flex;align-items:end;font-weight:800}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-grid article,.article{border:1px solid var(--line);padding:24px;border-radius:14px}.article{margin:28px 0}.article h2{margin-top:1.7em}.article h2:first-child{margin-top:0}.faq details{border-top:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font-weight:700}footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:112px;padding:28px clamp(20px,5vw,72px);border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}footer nav{flex-wrap:wrap;justify-content:flex-end;min-height:24px;max-width:620px}.page{max-width:900px;margin:auto;padding:70px 20px}.page h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1;letter-spacing:-.05em}.breadcrumb{color:var(--muted);font-size:.9rem}.related{display:flex;flex-wrap:wrap;gap:10px}.related a{border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:var(--accent)}canvas{max-width:100%}.result-canvas{display:block;margin-top:20px;border:1px solid var(--line);border-radius:10px;background:repeating-conic-gradient(#1b1f25 0 25%,#111419 0 50%) 50%/20px 20px}.result-canvas[hidden]{display:none}.pixelated{image-rendering:pixelated}.test-list li{padding:5px 0}.pass{color:var(--accent)}.fail{color:#ff8d8d}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.directory-card{transition:none}}@media(max-width:800px){.site-header nav{display:none}.tool-card{grid-template-columns:1fr}.feature-grid,.tool-directory{grid-template-columns:1fr}.hero{padding-top:60px}footer{flex-direction:column;gap:12px;min-height:210px}footer nav{justify-content:flex-start;min-height:84px}.file-preview-grid,.preview-grid{grid-template-columns:repeat(3,1fr)}}