body{min-height:100dvh}main{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100dvh - 52px)}.controls{padding:24px;border-right:var(--rule);background:var(--field)}h1{font-size:32px;margin-bottom:12px}p{margin:12px 0}label{display:block;font-weight:600;margin:20px 0 6px}textarea,select{width:100%;border:var(--rule-minor);padding:10px;background:var(--field);font:inherit;resize:vertical}textarea{overflow-wrap:anywhere}button{padding:10px 12px;background:var(--band);border:var(--rule-minor);cursor:pointer;font-weight:600}button:hover{background:var(--margin)}button.primary{background:var(--navy);color:var(--field);margin-top:8px}button:disabled{opacity:.4;cursor:default}input[type=file]{max-width:100%;font:inherit}input[type=range]{width:100%;accent-color:var(--navy)}output{float:right;font-family:var(--f-mono)}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.preview{padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.canvas-wrap{max-width:640px;width:100%;background:white;border:var(--rule-minor);padding:16px}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}#encoded{overflow-wrap:anywhere;max-width:640px;font-family:var(--f-mono);font-size:12px;user-select:all}#error{color:var(--danger)}.note{border-top:var(--rule-minor);padding-top:12px;color:var(--ink2)}@media(max-width:760px){main{grid-template-columns:1fr}.controls{border-right:0;border-bottom:var(--rule)}.preview{padding:20px}}

.guide{max-width:800px;margin:24px auto;padding:24px}.guide h2{margin-top:24px}

#sizeWarning{color:var(--warn);font-weight:600}