:root{color-scheme:light dark}
html,body{height:100%}
body{font-family:-apple-system,Helvetica,Arial,sans-serif;max-width:1160px;margin:0 auto;padding:32px 16px 16px;box-sizing:border-box;line-height:1.5;height:100vh;display:flex;flex-direction:column}
h1{font-size:20px;margin-bottom:4px;flex:none}
h2{font-size:14px;margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid #999}
h2.spaced{margin-top:32px}
p.hint{color:#888;font-size:13px;margin-top:0;flex:none}
label{display:block;font-size:13px;font-weight:600;margin:14px 0 2px}
p.field-hint{color:#888;font-size:12px;margin:0 0 4px}
textarea,input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:8px;font-family:monospace;font-size:14px;border:1px solid #999;border-radius:6px;background:transparent;color:inherit}
/* no hardcoded select background — a fixed dark bg + color:inherit (which follows OS
   light/dark automatically) went invisible in light mode: dark bg + auto-black text.
   transparent lets it inherit the page's own background in both themes, same as inputs. */
textarea{height:52px;resize:vertical}
/* .col is a flex column; flex items default to min-height:auto, which lets the browser
   shrink form fields to their single-line intrinsic size and ignore the CSS height above —
   that's what made the textarea resize handle look broken. flex-shrink:0 stops that. */
.col > *{flex-shrink:0}
.toggle-row{display:flex;align-items:center;gap:10px;margin:14px 0 2px}
label.switch{position:relative;width:38px;height:22px;flex:none;margin:0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.slider{position:absolute;inset:0;background:#999;border-radius:22px;cursor:pointer;transition:.15s;pointer-events:none}
.slider:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + .slider{background:#4a90d9}
.switch input:checked + .slider:before{transform:translateX(16px)}
.toggle-row label:not(.switch){margin:0;cursor:pointer}
fieldset{border:1px solid #666;border-radius:8px;margin:10px 0 0;padding:4px 14px 14px}
legend{font-size:12px;color:#888;padding:0 6px}
#drop{margin-top:0;border:2px dashed #999;border-radius:10px;padding:40px 20px;text-align:center;cursor:pointer}
#drop.over{border-color:#4a90d9;background:rgba(74,144,217,.08)}
#drop img{max-width:100%;max-height:200px;image-rendering:pixelated}
button{margin-top:16px;padding:10px 18px;font-size:14px;border:none;border-radius:6px;background:#4a90d9;color:#fff;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button.secondary{background:#555}
#createBtn{width:100%;padding:14px 18px;font-size:15px}
.checker{max-width:100%;image-rendering:pixelated;border:1px solid #999;background:
  repeating-conic-gradient(#ccc 0 90deg,#eee 90deg 180deg) 0/16px 16px}
#status{font-size:13px;color:#888;margin-top:8px;white-space:pre-line}
#previewOut{display:none;margin-top:12px}
#previewOut.show{display:block}
.container{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}
.col{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-right:10px;padding-bottom:24px}@media (max-width:820px){
  body{height:auto;display:block}
  .container{grid-template-columns:1fr}
  .col{overflow-y:visible;min-height:auto;padding-right:0}
}