#editDots{display:block;margin:10px auto;max-width:100%;min-height:32px}
#dotEditor{box-sizing:border-box;position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:12px;background:#171717;color:#eee;font:13px Arial,sans-serif;overflow:hidden}
#dotEditor[open]{display:flex;flex-direction:column;gap:8px}#dotEditor::backdrop{background:#171717}
#dotEditor header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}#dotEditor label{display:flex;align-items:center;gap:6px}#dotHint{font-size:12px;color:#ccc;margin:0}
#dotViewport{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:crosshair;background:#333}#dotCanvas{display:block}#dotMessage{position:absolute;inset:35% 20px auto;text-align:center;pointer-events:none}
#dotEditor footer{display:flex;justify-content:center;gap:12px;padding-bottom:env(safe-area-inset-bottom)}#dotEditor button{background:#292929;border:1px solid #aaa;color:#fff;min-height:44px;padding:8px 14px;cursor:pointer}#dotEditor button:disabled{opacity:.4}#dotEditor :focus-visible{outline:2px solid #fff;outline-offset:2px}#dotEditor output{font-variant-numeric:tabular-nums}#dotEditor input{accent-color:#777}
@media(max-width:450px){#dotEditor{padding:8px}#dotEditor header strong{flex-basis:100%}#dotEditor footer{gap:6px}#dotEditor footer button{flex:1;padding:8px 4px;font-size:11px}}