.two-d-shell{width:min(1180px,calc(100% - 32px));margin:30px auto 64px}.two-d-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,330px);gap:28px;align-items:start;margin-bottom:24px}.two-d-heading h1{margin:0 0 8px;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:0;color:#202738}.two-d-heading p{max-width:760px;margin:0;color:#596275;line-height:1.55}.two-d-note{border-left:3px solid #5b36f2;border-radius:0 8px 8px 0;background:#f2efff;padding:12px 14px;color:#35266f;font-size:13px;line-height:1.45}.two-d-workspace{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);overflow:hidden;border:1px solid #e1e4ef;border-radius:8px;background:#fff;box-shadow:0 12px 32px rgba(38,42,66,.08)}.two-d-form{padding:22px;border-right:1px solid #e1e4ef}.two-d-modes{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;margin:0 0 20px;border:1px solid #d9dced;border-radius:8px;background:#f4f5fb}.two-d-modes legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.two-d-modes label{position:relative;min-width:0}.two-d-modes input{position:absolute;opacity:0}.two-d-modes span{display:flex;min-height:42px;align-items:center;justify-content:center;padding:7px 5px;border-radius:6px;color:#596275;font-size:13px;font-weight:700;text-align:center;cursor:pointer}.two-d-modes input:checked+span{background:#fff;color:#4f2bd8;box-shadow:0 1px 4px rgba(38,42,66,.12)}.two-d-modes input:focus-visible+span{outline:3px solid #c4b5fd;outline-offset:1px}.two-d-field{display:grid;gap:6px;margin-bottom:15px;color:#374151;font-size:13px;font-weight:700}.two-d-field textarea,.two-d-field select,.two-d-field input[type=number]{width:100%;min-height:44px;padding:9px 11px;border:1px solid #aeb5c8;border-radius:8px;background:#fff;color:#202738;font:inherit}.two-d-field textarea{min-height:126px;resize:vertical;line-height:1.45}.two-d-field small{color:#687386;font-weight:400;line-height:1.4}.two-d-advanced{margin:0}.two-d-advanced summary{margin:0 0 14px;color:#4f2bd8;font-size:13px;font-weight:800;cursor:pointer}.two-d-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two-d-color input{width:100%;height:44px;padding:3px;border:1px solid #aeb5c8;border-radius:8px;background:#fff}.two-d-format-options{padding:13px;margin:0 0 15px;border:1px solid #e1e4ef;border-radius:8px;background:#f8f8fc}.two-d-format-options[hidden]{display:none}.two-d-format-options .two-d-field:last-child{margin-bottom:0}.two-d-preview-panel{min-width:0;padding:24px;display:flex;flex-direction:column;background:#fbfbfe}.two-d-preview-panel h2{margin:0 0 18px;font-size:19px}.two-d-preview-wrap{min-height:360px;display:flex;align-items:center;justify-content:center;overflow:auto;border:1px solid #e1e4ef;border-radius:8px;background:#fff;padding:22px}.two-d-preview-wrap canvas{max-width:100%;height:auto;image-rendering:pixelated}.two-d-metrics{min-height:22px;margin:12px 0 0;color:#687386;font-size:12px}.two-d-status{min-height:42px;margin:8px 0;color:#166534;font-size:14px;line-height:1.45}.two-d-status.is-error{color:#b91c1c}.two-d-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.two-d-actions button:disabled{opacity:.45;cursor:not-allowed}.two-d-reference{margin-top:38px;border-top:1px solid #e1e4ef;padding-top:28px}.two-d-reference h2{font-size:25px}.two-d-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.two-d-reference h3{font-size:16px;margin-bottom:6px}.two-d-reference p{color:#596275;line-height:1.55}@media(max-width:820px){.two-d-heading{grid-template-columns:1fr}.two-d-workspace{grid-template-columns:1fr}.two-d-form{border-right:0;border-bottom:1px solid #e1e4ef}.two-d-reference-grid{grid-template-columns:1fr}.two-d-preview-panel{padding:18px}.two-d-preview-wrap{min-height:260px}}@media(max-width:480px){.two-d-shell{width:calc(100% - 20px);margin-top:18px}.two-d-form{padding:14px}.two-d-modes span{font-size:11px}.two-d-settings{grid-template-columns:1fr}.two-d-actions button{flex:1 1 100px}.two-d-preview-wrap{padding:12px;min-height:220px}.two-d-advanced:not([open]){padding:12px 0 0;border-top:1px solid #e1e4ef}.two-d-advanced:not([open]) summary{margin:0}}
/* Keep the advanced-settings disclosure comfortable to tap on touch screens. */
.two-d-advanced > summary{display:flex;min-height:44px;align-items:center}