*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#eee;background:#111;height:100%;font-family:-apple-system,system-ui,sans-serif}.app{grid-template-columns:1fr 300px;height:100%;display:grid}@media (width<=800px){.app{grid-template-rows:1fr auto;grid-template-columns:1fr}.panel{max-height:45vh}}.canvas-wrap{min-height:0;position:relative}.panel{background:#1b1b1f;border-left:1px solid #2c2c33;padding:12px;font-size:13px;overflow-y:auto}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:#9a9;margin:14px 0 6px;font-size:13px}.panel h1{margin-bottom:4px;font-size:16px}.row{justify-content:space-between;align-items:center;gap:8px;margin:4px 0;display:flex}.row label{color:#bbb;flex:1}.row input[type=range]{flex:1.4}.row input[type=color]{background:0 0;border:0;width:36px;height:24px}.row select,.row input[type=number]{color:#eee;background:#26262c;border:1px solid #3a3a44;border-radius:4px;width:70px;padding:3px 6px}.val{text-align:right;font-variant-numeric:tabular-nums;color:#ddd;width:52px}button{color:#fff;cursor:pointer;background:#2d6a4f;border:0;border-radius:6px;width:100%;margin:4px 0;padding:8px 10px;font-size:13px}button.secondary{background:#33333c}button.active{background:#4c8c6a;outline:2px solid #8fd}.tools{grid-template-columns:1fr 1fr;gap:4px;display:grid}.hint{color:#888;margin:6px 0;font-size:12px;line-height:1.4}.drop{pointer-events:none;background:#2d6a4f59;border:3px dashed #8fd;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;inset:0}.badge{background:#0000008c;border-radius:6px;padding:4px 8px;font-size:12px;position:absolute;top:8px;left:8px}