*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#eaf4ff;color:#173354}header{padding:16px 24px;background:#fff;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}h1{margin:4px 0}header p{margin:0}button,.file-button{border:0;border-radius:12px;background:#d9eaff;color:#173354;padding:11px 14px;font:inherit;font-weight:650;cursor:pointer}button:hover,.selected{background:#83b7ff}.actions,.shapes{display:flex;flex-wrap:wrap;gap:8px}main{display:grid;grid-template-columns:265px minmax(0,1fr);gap:12px;padding:12px;min-height:70vh}aside{background:#fff;border-radius:16px;padding:16px}aside label{display:block;margin:14px 0}input{display:block;margin-top:6px;max-width:100%}.stage{position:relative;min-height:480px;border-radius:16px;overflow:hidden;background:#b7d9fb}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;top:12px;left:12px;background:#ffffffdb;padding:9px;border-radius:9px}#touch{position:absolute;bottom:20px;right:20px;text-align:center}#touch button{margin:3px;touch-action:none}#touch[hidden]{display:none}footer{padding:12px 24px}.hint{font-size:13px;color:#53657c}@media(max-width:720px){main{grid-template-columns:1fr}.stage{min-height:400px}aside{order:2}}
