*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#0f1115;color:#e5e7eb}header{display:flex;align-items:center;gap:2rem;padding:.75rem 1rem;background:#161922;border-bottom:1px solid #262a35}header h1{font-size:1.1rem;margin:0}.controls{display:flex;gap:1.5rem;align-items:center;font-size:.85rem}main{display:grid;grid-template-columns:minmax(280px,1fr) minmax(480px,2fr) minmax(320px,1fr);gap:1px;background:#262a35}.panel{background:#0f1115;padding:.75rem;overflow:auto}table{width:100%;border-collapse:collapse;font-size:.8rem}td{padding:.2rem .3rem;vertical-align:top}input[type=number]{width:5.5rem}.field-error{color:#f87171;font-size:.7rem}canvas{background:#05060a;width:100%;height:auto;touch-action:none}img#result-image{width:100%;height:auto;background:#05060a}