.css-studio{font:16px/1.45 system-ui,Arial,sans-serif;max-width:1120px;margin:20px auto;color:#202331}.css-studio *{box-sizing:border-box}.css-studio header{padding:16px 20px;background:#edf9fb;border-radius:14px}.css-studio h2,.css-studio h3{margin:0 0 8px}.css-studio p{margin:5px 0}.css-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(300px,1fr);gap:20px;margin-top:20px}.css-controls,.css-preview,.css-studio form{background:#fff;border:1px solid #d9e2e7;border-radius:14px;padding:18px}.css-controls label,.css-studio form>label,.css-grid>label{display:block;font-weight:600;margin-bottom:14px}.css-controls input:not([type=file]):not([type=color]):not([type=range]),.css-controls select,.css-studio form input,.css-studio form textarea{width:100%;padding:10px;border:1px solid #bdc9d1;border-radius:8px;font:inherit}.css-studio button,.css-upload{background:#087e89;color:white;border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}.css-studio button:disabled{opacity:.5}.css-tabs{display:flex;gap:8px;margin:14px 0}.css-tabs button{flex:1;background:#e5f0f1;color:#224}.css-tabs button.active{background:#087e89;color:white}.css-upload{display:block!important;text-align:center;cursor:pointer}.css-upload input{display:none}.css-edit{padding:12px;margin:14px 0;border:1px solid #c9dadb;border-radius:8px}.css-edit[hidden]{display:none}.css-edit label{margin:8px 0}.css-hint{font-size:13px;color:#52636a;margin-top:16px!important}.css-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:650px;background:#f1f5f7}.css-shirt{position:relative;width:min(78%,400px);height:500px;background:#f9f9f7;clip-path:polygon(24% 4%,37% 0,63% 0,76% 4%,100% 16%,87% 31%,79% 27%,79% 100%,21% 100%,21% 27%,13% 31%,0 16%);filter:drop-shadow(0 5px 9px #555);box-shadow:inset 0 0 24px #0002}.css-collar{position:absolute;left:37%;top:-4%;width:26%;height:11%;border:8px solid #7775;border-radius:0 0 50% 50%;z-index:2}.css-print{position:absolute;left:27%;top:18%;width:46%;height:58%;border:1px dashed #0b8291;overflow:hidden}.css-items{position:absolute;inset:0}.css-element{position:absolute;text-align:center;line-height:1.05;cursor:grab;touch-action:none;user-select:none;white-space:pre-wrap;overflow:visible}.css-element img{display:block;width:100%;pointer-events:none}.css-element.selected{outline:2px solid #e94c88;outline-offset:2px}.css-preview>span{margin-top:18px;font-size:13px;letter-spacing:2px;font-weight:700}.css-studio form{margin-top:20px}.css-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.css-sizes{display:flex;gap:5px}.css-sizes label{font-size:12px;flex:1;text-align:center}.css-sizes input{padding:4px!important;text-align:center}.css-hp{position:absolute;left:-9999px;opacity:0}.css-studio form button{margin-top:12px}.css-studio [data-status]{font-weight:600;margin-top:10px}@media(max-width:720px){.css-layout,.css-grid{grid-template-columns:1fr}.css-preview{min-height:560px}.css-shirt{height:440px}}
/* Version 1.1 mockup and phone QR upload */
.css-shirt{background:transparent!important;clip-path:none;filter:drop-shadow(0 7px 8px #20333b45);box-shadow:none}.css-shirt-photo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.css-fabric-base{transition:fill .2s}.css-print{z-index:2;left:24%;top:22%;width:52%;height:55%}.css-items{z-index:3}.css-qr-panel{padding:14px;margin:12px 0;text-align:center;background:#f3f7f8;border:1px solid #c9dadb;border-radius:10px}.css-qr-panel[hidden]{display:none}.css-qr-panel>div{display:flex;justify-content:center}.css-qr-panel canvas,.css-qr-panel img{max-width:100%;height:auto}.css-phone{min-height:100vh;background:#eff5f7;display:grid;place-items:center;padding:20px;font:16px/1.5 system-ui,Arial,sans-serif;color:#202331}.css-phone section{width:min(100%,480px);padding:28px;background:#fff;border-radius:18px;box-shadow:0 12px 45px #183d4b1a;text-align:center}.css-phone-logo{font-weight:900;letter-spacing:2px;color:#087e89}.css-phone h1{font-size:28px;line-height:1.15}.css-phone-pick{display:block;padding:18px;margin:20px 0 12px;background:#eaf5f6;border:2px dashed #64a5aa;border-radius:10px;font-weight:700}.css-phone-pick input{display:block;width:100%;margin-top:12px}.css-phone button{width:100%;padding:14px;background:#087e89;color:white;border:0;border-radius:9px;font-weight:700}.css-phone [role=status]{font-weight:700}
.css-phone{position:fixed;inset:0;z-index:999999;overflow:auto}
.css-back-neck{display:none}.css-shirt[data-view="back"] .css-front-neck{display:none}.css-shirt[data-view="back"] .css-back-neck{display:block}.css-sizes{flex-wrap:wrap}.css-sizes label{min-width:42px}
/* Keep the preview artwork aligned with the garment proportions. */
.css-shirt{width:min(82%,400px);height:auto;aspect-ratio:4/5}.css-shirt-photo{preserveAspectRatio:xMidYMid meet}.css-shirt-short,.css-shirt-long,.css-shirt-tank{display:none}.css-shirt[data-style="crew"] .css-shirt-short,.css-shirt[data-style="vneck"] .css-shirt-short,.css-shirt[data-style="long"] .css-shirt-long,.css-shirt[data-style="tank"] .css-shirt-tank{display:block}.css-vneck,.css-back-neck{display:none}.css-shirt[data-view="front"][data-style="vneck"] .css-vneck{display:block}.css-shirt[data-view="back"] .css-front-neck{display:none}.css-shirt[data-view="back"] .css-back-neck{display:block}.css-shirt[data-style="vneck"] .css-front-neck{display:none}.css-phone [hidden],.css-qr-panel[hidden]{display:none!important}.css-studio [data-phone-start]{display:block!important;width:100%!important;margin:12px 0;background:#1d2948!important;color:#fff!important;font-size:16px!important}.css-qr-panel{position:relative;z-index:4}.css-preview{order:0}.css-controls{order:1}@media(max-width:720px){.css-preview{order:-1;min-height:0;padding:18px}.css-shirt{height:auto;max-height:82vw;width:min(82vw,380px)}.css-controls{order:0}.css-layout{display:flex;flex-direction:column}.css-element{overflow:hidden;overflow-wrap:anywhere}}
/* Mobile design studio flow modeled on the supplied screen recording */
.css-studio{max-width:1000px}.css-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.css-top-actions{display:flex;gap:8px;flex-shrink:0}.css-top-actions button{background:#fff;color:#1676c4;border:1px solid #1676c4;border-radius:4px;text-transform:uppercase;font-size:13px}.css-top-actions [data-next-step]{background:#1676c4;color:white}.css-layout{display:flex;flex-direction:column}.css-preview{order:-1;width:100%;min-height:0}.css-preview>span{margin-top:12px}.css-controls{order:0;width:100%}.css-controls[data-active] [data-tool-panel]{display:none}.css-controls[data-active="upload"] [data-tool-panel="upload"],.css-controls[data-active="text"] [data-tool-panel="text"],.css-controls[data-active="art"] [data-tool-panel="art"],.css-controls[data-active="product"] [data-tool-panel="product"],.css-controls[data-active="layers"] [data-tool-panel="layers"]{display:block}.css-controls section{padding:14px 0}.css-controls section h3{margin:0 0 10px}.css-toolbar{display:flex;justify-content:space-around;gap:4px;position:sticky;bottom:0;background:#fff;padding:10px 2px;z-index:10;border-top:1px solid #d7dfe4}.css-toolbar button{flex:1;padding:10px 5px;background:#f2f4f6;color:#26313b;font-size:12px}.css-toolbar button.active{color:#1676c4;background:#e9f3ff;box-shadow:inset 0 2px #1676c4}.css-toolbar button[data-tool="upload"]{font-size:12px}.css-controls .css-tabs{margin:8px 0}.css-controls .css-tabs button{padding:10px;border-radius:4px;background:white;color:#1676c4;border:1px solid #1676c4}.css-controls .css-tabs button.active{background:#1676c4;color:white}.css-controls [data-tool-panel="upload"] .css-upload,.css-controls [data-tool-panel="art"] .css-upload{background:white;border:1px dashed #aebdca;border-radius:8px;color:#253242;padding:18px}.css-controls [data-phone-start]{background:#1676c4!important;border-radius:4px!important}.css-layer{display:block;width:100%;margin:5px 0;background:#f3f5f6!important;color:#26313b!important;text-align:left}.css-layer.selected{outline:2px solid #1676c4}.css-edit{margin:12px 0}.css-edit[hidden]{display:none}.css-preview{background:#f1f3f4}.css-shirt{max-height:620px}@media(max-width:720px){.css-top{align-items:flex-start}.css-top h2{font-size:22px}.css-top p{font-size:13px}.css-top-actions{flex-direction:column}.css-preview{min-height:0}.css-shirt{width:min(76vw,380px);max-height:none;aspect-ratio:4/5}.css-studio form{scroll-margin-top:12px}.css-controls{padding:10px}.css-toolbar button{font-size:11px}.css-controls section{padding:12px 0}}
/* Photographic shirt assets and color overlay */
.css-shirt-photo-wrap{display:none;position:absolute;inset:0;z-index:1}.css-shirt[data-style="crew"] .css-shirt-photo-wrap,.css-shirt[data-style="vneck"] .css-shirt-photo-wrap{display:block}.css-shirt[data-style="crew"] .css-shirt-vector,.css-shirt[data-style="vneck"] .css-shirt-vector{display:none}.css-shirt-tint{position:absolute;inset:0;background:var(--shirt-color,#f9f9f7);-webkit-mask-image:var(--shirt-mask);mask-image:var(--shirt-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}.css-shirt-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08);opacity:.90}.css-shirt-highlight{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;filter:grayscale(1) brightness(1.35);opacity:.10;pointer-events:none}.css-shirt-vector{position:absolute;inset:0;z-index:1}.css-shirt-vector>svg{width:100%;height:100%}.css-print{z-index:2}.css-items{z-index:3}
/* Keep the garment visible while adjusting an element. */
.css-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);align-items:start;gap:18px}.css-preview{grid-column:1;grid-row:1;position:sticky;top:90px;order:0;z-index:2}.css-controls{grid-column:2;grid-row:1;order:0}.css-toolbar{position:static}.css-controls[data-active="art"] [data-tool-panel="art"]{display:none}@media(max-width:720px){.css-layout{display:flex;flex-direction:column;gap:12px}.css-preview{position:sticky;top:108px;width:100%;order:-1;z-index:3;padding:10px;box-shadow:0 4px 16px #162c3a20}.css-shirt{width:min(58vw,245px);max-height:none;aspect-ratio:4/5}.css-preview>span{margin-top:5px;font-size:11px}.css-controls{width:100%;order:0}.css-toolbar{position:sticky;bottom:0}}
.css-edit output{float:right;font-size:13px;font-weight:700;color:#1676c4}.css-edit input[type=range]{width:100%;display:block}
@font-face{font-family:'Corksee Anton';src:url('fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Bebas';src:url('fonts/BebasNeue-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Bangers';src:url('fonts/Bangers-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Black Ops';src:url('fonts/BlackOpsOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Graduate';src:url('fonts/Graduate-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Lobster';src:url('fonts/Lobster-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Corksee Pacifico';src:url('fonts/Pacifico-Regular.ttf') format('truetype');font-display:swap}
.css-font-field{margin:10px 0}.css-font-field span{display:block;font-weight:700;margin-bottom:5px}.css-studio .css-font-field button{width:100%;background:#f7fafb;color:#1e2935;border:1px solid #aebdca;text-align:left;font-size:20px;line-height:1.3}.css-font-browser{margin:10px 0 14px;padding:12px;border:1px solid #ccd7dd;border-radius:10px;background:#fff}.css-font-browser[hidden],.css-font-list button[hidden]{display:none!important}.css-font-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}.css-font-bar button{background:#edf3f6;color:#1e2935;font-size:20px;padding:2px 10px}.css-font-tabs{display:flex;gap:5px;overflow-x:auto;margin:12px 0;padding-bottom:4px}.css-font-tabs button{flex:0 0 auto;background:#edf3f6;color:#233340;font-size:12px;padding:7px 9px}.css-font-tabs button.active{background:#1676c4;color:#fff}.css-font-list{max-height:380px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.css-font-list button{min-height:80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;background:#fff;color:#1e2935;border:1px solid #cbd5db;padding:10px}.css-font-list button:hover,.css-font-list button:focus{border-color:#1676c4;box-shadow:0 0 0 2px #1676c433}.css-font-sample{font-size:22px;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.css-font-list small{font:12px/1.3 system-ui,sans-serif;color:#58707b;margin-top:6px}.css-element{white-space:nowrap}.css-element.selected{overflow:visible}@media(max-width:720px){.css-font-list{grid-template-columns:1fr 1fr;max-height:310px}.css-font-sample{font-size:19px}}

.css-studio .css-check{display:flex;align-items:center;gap:9px;font-weight:600}.css-studio .css-check input{width:18px;height:18px;flex:none}.css-studio .css-handle{position:absolute;z-index:12;width:28px;height:28px;padding:0;border:2px solid white;border-radius:50%;background:#1676c4;color:#fff;font-size:20px;line-height:22px;touch-action:none;cursor:grab;box-shadow:0 1px 5px #17243c88}.css-studio .css-resize{right:-17px;bottom:-17px}.css-studio .css-rotate{left:50%;top:-39px;transform:translateX(-50%)}

.css-color-choice{padding:10px 2px 4px}.css-color-choice label{display:block;font-weight:700}.css-color-choice select{margin-top:5px}

.css-print{height:auto;aspect-ratio:13/16}.css-studio [data-resolution]{font-size:13px;font-weight:700;color:#1b6d44;margin:8px 0}.css-studio [data-resolution].css-low-dpi{color:#ad362a}

.css-print{overflow:visible}

.css-color-swatches{display:flex;flex-wrap:wrap;gap:9px;padding:10px 2px}.css-studio .css-color-swatches button{width:35px;height:35px;padding:0;border:2px solid #9aabb4;border-radius:50%;background:var(--swatch);box-shadow:0 1px 3px #0002}.css-studio .css-color-swatches button.active{outline:3px solid #1676c4;outline-offset:2px}.css-studio .css-color-swatches button:focus-visible{outline:3px solid #1676c4;outline-offset:2px}

.css-studio [hidden]{display:none!important}.css-studio .css-edit .css-check{display:flex!important;align-items:center;gap:8px;width:100%;line-height:1.3}.css-studio .css-edit .css-check input[type="checkbox"]{display:inline-block!important;width:18px!important;height:18px!important;min-width:18px!important;margin:0!important;padding:0!important;flex:0 0 18px}.css-studio .css-edit [data-image-options]{width:100%;overflow-wrap:normal}

.css-studio [data-upload-status]{font-size:13px;font-weight:600;color:#ad362a;margin:7px 0}.css-studio [data-upload-status]:empty{display:none}