.diagram-input{--diagram-ink:#152c39;--diagram-pink:#b51f67;margin:1.25rem 0;padding:clamp(.75rem,2vw,1.4rem);border:1px solid #b9cbd1;border-radius:18px;background:#f7fbfc;color:var(--diagram-ink)}
.diagram-toolbar,.diagram-options{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.diagram-toolbar{padding-bottom:.8rem;border-bottom:1px solid #c8d8de}.diagram-input button,.diagram-input input,.diagram-input select{font:inherit}.diagram-input button{cursor:pointer;padding:.55rem .75rem;border:1px solid #9aafb8;border-radius:8px;background:white;color:var(--diagram-ink);min-height:42px;transition:background .15s,box-shadow .15s}.diagram-input button:hover{background:#dff4f7}.diagram-input button[aria-pressed=true]{background:var(--diagram-ink);color:white;border-color:var(--diagram-ink);box-shadow:0 3px 0 #f398c2}.diagram-input button:disabled{opacity:.45;cursor:default}.diagram-input :is(button,input,select,summary):focus-visible{outline:3px solid #b51f67;outline-offset:3px}.diagram-options{margin-top:.8rem}.diagram-options label{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.86rem}.diagram-input input,.diagram-input select{background:white;color:var(--diagram-ink);padding:.55rem;border:1px solid #9aafb8;border-radius:6px;min-height:42px}.diagram-label{width:145px}.diagram-instructions{font-size:.88rem;line-height:1.55;max-width:85ch;margin:.9rem 0 .4rem}.diagram-status{font-size:.9rem;font-weight:700;min-height:1.5em;color:var(--diagram-pink);margin:.5rem 0}.diagram-scroll{overflow:auto;max-height:680px;border:1px solid #afc5cf;border-radius:12px;background:white;overscroll-behavior:contain}.diagram-canvas{display:block;width:100%;min-width:360px;height:auto;max-width:none!important;touch-action:pan-x pan-y;background-color:#fff;background-image:radial-gradient(#c9dce3 .8px,transparent .8px);background-size:20px 20px;cursor:crosshair;user-select:none}.diagram-element{cursor:pointer}.diagram-element:hover{filter:drop-shadow(0 0 3px #f398c2)}.diagram-coordinates{margin-top:1rem;font-size:.88rem}.diagram-input summary{cursor:pointer;padding:.5rem 0;font-weight:700}.diagram-point-fields{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.7rem}.diagram-point-fields fieldset{display:flex;gap:.5rem;border:1px solid #b9cbd1;border-radius:8px;padding:.65rem;min-width:0}.diagram-point-fields label{display:flex;align-items:center;gap:.3rem}.diagram-point-fields input{width:75px}.diagram-element-list{font-size:.83rem;margin-top:.7rem}.diagram-element-list ol{padding-left:1.5rem;max-height:220px;overflow:auto}.diagram-element-list li{padding:.45rem 0;border-bottom:1px solid #dce8ec}.diagram-element-list button{font-size:.8rem;padding:.2rem .5rem;margin-left:.4rem;min-height:34px}@media(max-width:600px){.diagram-toolbar{gap:.35rem}.diagram-toolbar button{font-size:.8rem;flex:1 1 auto}.diagram-options{align-items:flex-start}.diagram-scroll{max-height:520px}.diagram-point-fields{display:block}.diagram-point-fields fieldset{margin-bottom:.5rem}.diagram-input{border-radius:12px}.diagram-options label{width:100%}}@media(prefers-reduced-motion:reduce){.diagram-input *{transition:none!important;animation:none!important}}