:root{--ink:#171713;--paper:#f4f0e8;--surface:#fffdf8;--muted:#716f68;--line:#d9d3c7;--accent:#b7f34a;--blue:#335cff;--shadow:0 22px 70px #25221a17}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}button,input{font:inherit}main{max-width:1320px;margin:auto;padding:58px 32px 110px}.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;margin-bottom:48px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;margin:0 0 18px}.intro h1{font-size:clamp(48px,6vw,84px);line-height:.92;letter-spacing:-.06em;margin:0}.intro h1 em{font:400 1em Georgia,serif}.intro>p{font-size:18px;color:var(--muted);max-width:500px;margin:0 0 5px}.tool{display:grid;grid-template-columns:1fr .9fr;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}.controls,.preview-panel{padding:34px;min-width:0}.preview-panel{background:var(--ink);color:#fff}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}.panel-head>div{display:flex;align-items:center;gap:12px}.panel-head span{font-size:11px;font-weight:700;color:var(--muted)}.panel-head h2{font-size:22px;margin:0}.panel-head.light span{color:#aaa89f}.text-button{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer}.dropzone{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1.5px dashed #aaa398;background:#f8f4ec;padding:28px;cursor:pointer}.dropzone b{font-size:22px}.dropzone span{color:var(--muted);margin-top:5px;font-size:13px}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.settings{display:grid;gap:18px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.settings label{display:grid;grid-template-columns:120px 1fr 55px;align-items:center;gap:12px}.settings label>span{font-size:13px;font-weight:700}.settings output{font-size:12px;color:var(--muted);text-align:right}.settings input[type=color]{width:42px;height:34px;padding:0}.transparent{grid-column:2/-1;border:1px solid var(--line);background:transparent;padding:8px 10px;cursor:pointer}.transparent[aria-pressed=true]{background:var(--ink);color:#fff}.privacy-note{font-size:12px;color:var(--muted);margin:18px 0 0}.preview{width:min(100%,310px);aspect-ratio:1;margin:20px auto;background:#fff;display:grid;place-items:center;overflow:hidden;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview span{color:#777;font-size:13px}.preview img{width:100%;height:100%;object-fit:contain}.sizes{display:flex;justify-content:center;gap:9px;margin:16px 0}.sizes span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #44443e;border-radius:9px;color:#aaa;font-size:11px}.download,.copy{border:0;background:var(--accent);color:#172000;padding:14px 18px;font-weight:800;cursor:pointer}.download{width:100%;margin-top:5px}.download:disabled{opacity:.35;cursor:not-allowed}.code-section{margin:90px 0 0;border-top:1px solid var(--ink);padding-top:38px}.code-section h2{font-size:clamp(34px,4vw,58px);line-height:1;margin:0 0 20px}.code-section pre{background:#24241f;color:#e8e5d9;padding:20px;overflow:auto;white-space:pre-wrap;font:13px/1.6 ui-monospace,monospace}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:11px 17px;border-radius:999px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.intent-content{margin-top:105px;max-width:100%}.intent-intro{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px}.intent-intro .eyebrow{grid-column:1/-1}.intent-intro h2,.intent-faq h2{font-size:clamp(34px,4vw,55px);line-height:1;margin:0}.intent-intro>p{font-size:18px;color:var(--muted);margin:0}.intent-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;list-style:none;padding:0;margin:48px 0;background:var(--line)}.intent-steps li{background:var(--paper);padding:20px}.intent-steps span{color:var(--blue);font-size:12px;font-weight:700}.intent-steps p{margin:35px 0 0}.intent-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:0 60px}.intent-faq>.eyebrow{grid-column:1/-1}.intent-faq h2{grid-row:2/span 10}.intent-faq details{grid-column:2;border-top:1px solid var(--line);padding:16px 0}.intent-faq summary{font-weight:700;cursor:pointer}.intent-faq details p{color:var(--muted)}footer{margin-top:80px;padding:25px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}@media(max-width:800px){main{padding:38px 18px 80px}.intro{grid-template-columns:1fr;gap:22px}.tool{grid-template-columns:1fr}.preview-panel{border-top:1px solid #3b3b35}.intent-intro,.intent-faq{grid-template-columns:1fr}.intent-faq h2{grid-row:auto}.intent-faq details{grid-column:auto}.intent-steps{grid-template-columns:1fr}.settings label{grid-template-columns:100px 1fr 48px}}