/* Shared Pixel artwork tools, with the site header and footer. */
:root{color-scheme:only light;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#050505}
*{box-sizing:border-box}
body{margin:0;padding:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
header{font-weight:700;letter-spacing:.12em}
main{max-width:1200px;margin:calc(clamp(32px,4vw,56px) + 18px) auto}
@media(max-width:760px){main{margin-top:calc(clamp(32px,4vw,56px) + 44px)}}
h1{font-size:clamp(26px,6.4vw,88px);line-height:1;letter-spacing:-.065em;margin:18px 0 24px}
p{line-height:1.6}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em}
.status{margin-top:64px;border-top:1px solid #ddd;padding-top:24px;color:#555}

.inputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:32px}h2{font-size:12px;letter-spacing:.12em;margin:0 0 20px}.drop-area{border:1px dashed #aaa;min-height:245px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.drop-area.over{border:2px solid #000;background:#f5f5f5}.button{display:inline-block;background:#050505;color:#fff;padding:14px 24px;cursor:pointer;font-size:13px;font-weight:bold}.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.drop-area:focus-within,.inline-file:focus-within{outline:2px solid #000;outline-offset:4px}.hint{font-size:13px;color:#666;line-height:1.6}.inline-file{text-decoration:underline;cursor:pointer}textarea{display:block;width:100%;height:245px;padding:20px;border:1px solid #aaa;border-radius:0;resize:vertical;font:16px/1.6 monospace;background:#fff;color:#050505}button{font:inherit;cursor:pointer;border:0;border-radius:0;background:none;color:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #000;outline-offset:4px}.toolbar{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ccc;margin-top:52px}.toolbar [role=tab]{font-size:11px;font-weight:bold;letter-spacing:.1em;padding:20px 0;margin-right:26px;border-bottom:3px solid transparent}.toolbar [aria-selected=true]{border-color:#000}.reset{font-size:12px;text-decoration:underline}.art-preview{display:grid;place-items:center;min-height:300px;padding:32px;border:1px solid #ddd;margin:24px 0 40px;overflow:hidden}.art-preview img{display:block;max-width:100%;max-height:65svh;object-fit:contain}.art-preview p{color:#666;text-align:center}.details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}dl{margin:0}dt{font-size:12px;color:#666;margin-top:16px}dd{margin:5px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}dd dl{padding-left:16px;border-left:1px solid #ddd}li{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 monospace;border:1px solid #ddd;padding:20px;max-height:500px;overflow:auto}.explanation,.validation{border-top:1px solid #ddd;padding-top:28px;margin-top:40px}.explanation{font-size:13px;color:#555;max-width:800px}.explanation a{text-decoration:underline}.validation ul{list-style:none;padding:0;font-size:13px;line-height:1.7}.validation li{padding:8px 0}.validation li[data-level=error]{font-weight:bold}[hidden]{display:none!important}#raw-panel{padding-top:28px}@media(max-width:700px){.inputs,.details{grid-template-columns:1fr;gap:28px}.toolbar{gap:8px}.toolbar [role=tab]{font-size:10px;margin-right:14px}.art-preview{padding:16px;min-height:230px}}

.preview-controls{display:flex;justify-content:flex-end;margin-top:20px}.pixel-zoom{border:1px solid #050505;padding:10px 16px;font-size:12px;font-weight:700}.pixel-zoom[aria-pressed=true]{background:#050505;color:#fff}.art-preview.pixel-art img{image-rendering:crisp-edges;image-rendering:pixelated}


:root{--pad:clamp(22px,3.2vw,54px)}
body{min-height:100svh;display:flex;flex-direction:column}
main{flex:1;width:calc(100% - 2 * var(--pad));min-width:0;margin:48px auto 100px}
.site-head{padding:28px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;letter-spacing:.08em}
.site-head .brand{font-size:15px;letter-spacing:.12em;white-space:nowrap}
.site-head .nav{display:flex;gap:clamp(18px,2.4vw,38px)}
.site-head a:hover{text-decoration:underline;text-underline-offset:5px}
h1{max-width:100%;overflow-wrap:break-word;font-size:clamp(32px,6vw,80px)}
main .eyebrow a:hover{text-decoration:underline}
.link-arrow{width:1em;height:1em;vertical-align:-.1em}
.inputs>div,.details>section,.generator-grid>section{min-width:0}
.toolbar [role=tab],.reset,.inline-file{min-height:44px}
.inline-file{display:inline;line-height:2.5}
@media(max-width:760px){main{margin-top:28px}.site-head{padding-block:18px}.toolbar{align-items:center;flex-wrap:wrap}.toolbar [role=tab]{margin-right:12px} .trait-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.trait-remove{justify-self:end}}