:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e3eaf2;background:#10151e;font-size:16px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:24px;padding:20px 28px;border-bottom:1px solid #303c4d}a{color:#9cc6ff}h1{font-size:22px;margin:0}h1 span{font-size:14px;font-weight:400;color:#9baac0;margin-left:12px}#filename{margin-left:auto;overflow-wrap:anywhere;color:#acbad0}main{padding:18px 28px}button{font:inherit;font-size:14px;padding:9px 12px;border:1px solid #415069;border-radius:7px;background:#222d3e;color:inherit;cursor:pointer}button:hover{background:#32425a}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #9cc6ff;outline-offset:2px}.primary{background:#3060b4;border-color:#5289df}button[aria-pressed=true]{background:#304b70;border-color:#90bfff;box-shadow:inset 3px 0 #90bfff}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.separator{width:1px;background:#415069;margin:0 5px}.workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px}aside{padding:0 4px}h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin:10px 0 12px;color:#acbad0}.tools,#palette{display:grid;gap:6px}#palette button{text-align:left;display:flex;align-items:center;gap:10px}.swatch{width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid #ffffff66;color:white;border-radius:3px}.help{font-size:13px;color:#acbad0;line-height:1.7}.drawing{min-width:0;border:1px solid #415069;border-radius:9px;overflow:hidden}.canvas-bar,footer{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#192332;font-size:14px}.canvas-bar>div{white-space:nowrap}output{padding:0 10px}#viewport{height:calc(100dvh - 260px);min-height:360px;overflow:auto;background:#0c1119;padding:20px}canvas{display:block;touch-action:none;background:white}#message{min-height:1.5em;color:#b4c9e8;font-size:14px}dialog{width:min(480px,95vw);border:1px solid #526783;border-radius:12px;background:#192332;color:#e3eaf2;padding:24px}dialog::backdrop{background:#0009}dialog p{font-size:14px;line-height:1.5}label{display:grid;gap:6px;font-size:14px}input{width:100%;min-width:0;font:inherit;padding:8px;border:1px solid #526783;background:#10151e;color:inherit;border-radius:5px}#edges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}.top{grid-column:2}.left{grid-row:2;grid-column:1}.center{grid-row:2;grid-column:2;text-align:center;font-size:14px;color:#acbad0}.right{grid-row:2;grid-column:3}.bottom{grid-row:3;grid-column:2}.actions{display:flex;gap:8px;justify-content:flex-end}#new-fields{display:flex;gap:14px}#size-error{color:#ffb7ae}[hidden]{display:none!important}@media(max-width:750px){header{padding:14px;flex-wrap:wrap;gap:10px}h1 span{display:none}main{padding:12px}.workspace{grid-template-columns:1fr}aside{display:grid;gap:8px}aside h2,.help{display:none}.tools{display:flex}#palette{grid-template-columns:repeat(3,1fr)}#palette button{padding:6px;font-size:13px;gap:5px}#viewport{height:55dvh;min-height:280px}.canvas-bar{flex-wrap:wrap}#filename{font-size:13px}footer{flex-wrap:wrap}}