*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:10px;background:#008080;color:#111;font:14px Tahoma,Arial}.win{width:min(800px,100%);min-width:0;background:silver;border:2px solid;border-color:white #444 #444 white;box-shadow:6px 6px #004747;padding:3px}.title{background:linear-gradient(90deg,navy,#1680b9);color:white;display:flex;justify-content:space-between;align-items:center;padding:8px}.title h1{margin:0;font-size:clamp(13px,3vw,18px)}.title a{background:silver;color:black;text-decoration:none;padding:2px 9px;border:2px solid;border-color:white #444 #444 white}.body{padding:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.panel{background:white;border:2px inset #ddd;padding:12px;min-width:0}.panel h2{font-size:14px;margin:0 0 12px}.field{display:grid;gap:5px;margin:0 0 12px;font:bold 12px monospace}.field input,.field select{max-width:100%;min-width:0}.field input[type=text],.field select,.field input[type=file]{padding:7px;border:2px inset #ddd}.field input[type=color]{width:100%;height:38px}.field input[type=range]{width:100%;accent-color:navy}.hint{font:12px/1.5 Tahoma;color:#444}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preview{background:#edf2f8;border:1px solid #a6b5c3;display:grid;justify-items:center;gap:6px;padding:10px 5px;font:12px monospace}.preview canvas{width:80px;height:80px;max-width:100%;background:repeating-conic-gradient(#fff 0 25%,#ddd 0 50%) 50%/16px 16px;border:1px solid #aaa}.actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.actions button{background:silver;border:2px solid;border-color:white #444 #444 white;padding:9px;font:bold 12px Tahoma;cursor:pointer}#snippet{display:block;background:#102035;color:#dbf6e4;padding:9px;max-height:110px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 monospace}#status{background:white;border:2px inset #ddd;padding:9px;min-height:38px;margin-top:12px;font:12px/1.5 monospace}[hidden]{display:none!important}@media(max-width:600px){body{padding:4px}.body{padding:6px}.layout{grid-template-columns:1fr}.panel{padding:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}