:root{color-scheme:dark;--bg:#151416;--panel:#211f24;--text:#f5f1eb;--muted:#c6bdc9;--accent:#e4d2ff;--line:#4b4253}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.55 system-ui,sans-serif}
header{padding:1.1rem max(5vw,1rem);border-bottom:1px solid var(--line)}
header a{font-weight:750;color:inherit;text-decoration:none}
header span{margin-inline-start:.6rem;color:var(--accent);font-weight:500}
main{width:min(1120px,90vw);margin:clamp(2rem,7vw,6rem) auto}
h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1.05;letter-spacing:-.055em;margin:.45em 0 .22em}
h2{font-size:1.2rem;margin:0 0 1rem}
p,small{color:var(--muted)}
a{color:var(--accent);text-underline-offset:.25em}
.tool{display:block;max-width:27rem;margin-top:2rem;text-decoration:none}
.tool strong{font-size:1.35rem}.tool strong span{float:right}
.tool p{margin:.6rem 0 0}
.workspace{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2rem}
form,.preview,.tool{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(1rem,4vw,2rem)}
form label{display:block;font-weight:650;margin:1rem 0 .35rem}form label:first-child{margin-top:0}
input{width:100%;font:inherit;padding:.65rem .8rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:inherit}
small{display:block;margin-top:.35rem}
button,.downloads a{font:inherit;font-weight:700;border:0;border-radius:8px;background:var(--accent);color:#271739;padding:.65rem .9rem;text-decoration:none;cursor:pointer}
button{margin-top:1.25rem}
:focus-visible{outline:2px solid #e7b7ff;outline-offset:3px}
#status{margin:0}#status:not(:empty){margin-top:.85rem}
#code{display:grid;place-items:center;min-height:245px;text-align:center}
#code img{width:min(245px,100%);height:auto;image-rendering:pixelated;border-radius:4px}
.downloads:not([hidden]){display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:1.25rem}
@media(max-width:720px){.workspace{grid-template-columns:1fr}}

#wallpaper-preview{margin-top:1rem;text-align:center}
#wallpaper-preview summary{cursor:pointer;color:var(--accent)}
#wallpaper-image{display:block;width:min(230px,100%);height:auto;margin:.9rem auto 0;border-radius:12px}
button:disabled{opacity:.65;cursor:wait}