.sy-designer{padding:1rem;border:1px solid var(--sy-border,#354552);border-radius:12px;margin-top:1rem}.sy-designer[hidden]{display:none}.sy-designer header{display:flex;justify-content:space-between;gap:1rem}.sh-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:1.25rem}.sh-layout form{display:grid;align-content:start;gap:.65rem}.sh-layout label{display:grid;gap:.3rem;font-size:.88rem}.sh-layout select,.sh-layout input,.sh-layout textarea{max-width:100%;min-width:0;font:inherit;padding:.5rem;border:1px solid #546977;border-radius:5px;background:#14232d;color:#e4edf2}.sh-layout input[type=checkbox]{margin-right:.4rem}.sh-layout label:has(input[type=checkbox]){display:block}.sh-layout details{padding:.6rem;border:1px solid #354552;border-radius:6px}.sh-layout summary{cursor:pointer;font-weight:600;margin-bottom:.5rem}.sh-layout button{padding:.55rem .7rem;min-height:40px}.sh-preview{min-width:0}.sh-preview canvas{display:block;width:100%;height:480px;border-radius:8px;background:#0b1016;touch-action:none}.sh-toolbar{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin:.7rem 0}#sh-arcs{width:100%;height:230px;background:#101c25;border-radius:8px}#sh-json{width:100%;box-sizing:border-box;overflow-wrap:anywhere}#sh-dimensions{font-weight:600;margin:.6rem 0}#sh-status{min-height:2em}#sh-structure p{margin:.4rem 0}.sy-designer input:focus-visible,.sy-designer select:focus-visible,.sy-designer button:focus-visible{outline:2px solid #7ee2f2;outline-offset:3px}@media(max-width:760px){.sh-layout{grid-template-columns:1fr}.sh-preview{grid-row:1}.sh-preview canvas{height:310px}.sy-designer header{display:block}.sy-designer{padding:.7rem}.sh-layout form{grid-template-columns:1fr}.sh-layout details{min-width:0}}

.sy-layout[hidden]{display:none}.sy-designer label{align-content:start}.sy-designer input[type=checkbox]{width:18px;min-height:18px;height:18px;padding:0}.sy-designer input[type=color]{height:42px;padding:4px}.sy-designer header button{align-self:start}.sy-designer input:not([type=range]):not([type=checkbox]){box-sizing:border-box;height:42px}

.sh-canvas-frame{height:480px}.sh-preview .sh-canvas-frame canvas{height:100%;width:100%}@media(max-width:760px){.sh-canvas-frame{height:310px}}