.phone-preview .preview-side{min-width:0;padding:12px;background:transparent;box-shadow:none}.phone-preview .preview-board{height:auto;min-height:220px;padding:2px;background:#fffdf5;border:0;box-shadow:none}.phone-preview .preview-board canvas{width:100%;height:auto;max-width:350px;box-shadow:none;filter:none}.phone-preview .preview-board.zoomed{max-height:70vh;overflow:auto}.phone-preview .preview-board.zoomed canvas{max-width:none}.phone-preview .drawing-legend .cannot-draw,.phone-preview .drawing-legend span:has(.cannot-draw){display:none}.phone-preview .editor button,.phone-preview .editor select,.phone-preview .preview-bottom button,.phone-preview .purchase-actions button{min-height:44px}.phone-preview #order-image{width:100%;max-width:350px;height:auto}@media(max-width:600px){.phone-preview .create{padding-inline:10px}.phone-preview .preview-side{padding-inline:2px}.phone-preview .purchase-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}}.phone-preview .create:has(#preview[hidden]) :is(.preview-side,#next-step,#share-design),.phone-preview .create:has(#loading-panel:not([hidden])) :is(.preview-side,#next-step,#share-design){display:none}.phone-preview .upload-side #loading-panel{margin:12px 0}.phone-preview .preview-board canvas.editable{background-image:linear-gradient(to right,#bdc9bc88 1px,transparent 1px),linear-gradient(to bottom,#bdc9bc88 1px,transparent 1px),linear-gradient(#fffdf5a3,#fffdf5a3),var(--ai-trace,none);background-size:4% 4%,4% 4%,100% 100%,100% 100%}.phone-preview .phone-quota{font-weight:600;margin:8px 0}.phone-preview .phone-draft-tools{margin-bottom:8px}.customer-sign-in{white-space:nowrap;font-weight:600}.studio-sign-in a{text-decoration:underline}@media(min-width:901px){.phone-preview .create .preview-side:has(>#loading-panel:not([hidden])){display:block}.phone-preview .preview-side:has(>#loading-panel:not([hidden]))>:not(#loading-panel){display:none}}.create:has(.studio-sign-in) .creator{display:block}.create:has(.studio-sign-in) .upload-side>:not(.studio-sign-in),.create:has(.studio-sign-in) :is(.preview-side,#next-step,#share-design){display:none}.studio-sign-in .primary{display:inline-flex}.studio-sign-in span{display:block;margin-top:8px}
/*# sourceMappingURL=/cdn/shop/t/4/assets/phone-preview.css.map */