body{margin:0;font-family:sans-serif;background:#f7f7f8;color:#123;}
#app{max-width:1120px;margin:16px auto;}
#controls{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;}
#controls select,#controls button,#controls textarea,#controls input[type=text]{font-size:14px;padding:4px;}
#controls button{border-radius:4px; border:1px solid #eee; background:#fff; cursor:pointer;}
#controls button[disabled]{opacity:.35;cursor:default;}
#controls input[type=text]{max-width:150px; border: 1px solid #b4b;}
#prompt{flex:1 1 180px;min-height:32px;max-height:56px;resize:vertical;}
#stageWrap{border:1.5px solid #eee;background:#fff;margin-bottom:10px;overflow:auto;border-radius:7px;box-shadow:0 1px 5px #0083210d;}
#stage{display:block;background:#fcfcfb;margin:0 auto;border-radius:6px;touch-action:none;}
#instructions{margin:2px 8px 8px 8px ;color:#666;}
#preview{margin-top:8px;min-height:200px;border:1.5px solid #e2eef2;border-radius:7px;background:#fdfefc;display:flex;align-items:center;justify-content:center}
#iframe{width:100%;min-height:240px;border:none;background:#fff;border-radius:6px;}
#raster{box-shadow:0 0 0 1px #e8e8e8;background:#eefdf6;margin:8px auto;border-radius:6px}
@media(max-width:800px){#controls{flex-direction:column;align-items:stretch}}
canvas:focus{outline:none;}