:root{--navy:#142c3f;--aqua:#56c5c8;--paper:#fff;--red:#f34d38;--pink:#fb5797;--yellow:#fac300;--green:#079b55;--blue:#2aa9dd;--ink:#142c3f;--line:2px solid var(--navy);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#fff;font-size:16px}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.masthead{height:88px;background:#fff;border-bottom:var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px clamp(18px,4vw,54px);position:relative;z-index:10}
.brand{text-decoration:none;color:#000;display:flex;align-items:center;justify-content:center;gap:16px;line-height:1}
.brand-logo{display:block;width:auto;height:68px;object-fit:contain}
.brand-subtitle{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:700;font-size:3.5rem;line-height:.85;letter-spacing:-.02em;white-space:nowrap}
.header-actions{display:flex;gap:10px;align-items:center}
.text-button,.primary-button{border:var(--line);background:transparent;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer;min-height:44px}
.text-button:hover{background:#fff}
.primary-button{background:var(--red);color:#fff;box-shadow:3px 3px 0 var(--navy)}
.primary-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.studio{display:grid;grid-template-columns:minmax(420px,1.2fr) minmax(430px,.8fr);min-height:calc(100vh - 88px)}
.canvas-column{padding:clamp(16px,3vw,38px);display:flex;flex-direction:column;justify-content:center}
.field{min-height:calc(100vh - 164px);display:grid;place-items:center;position:relative;overflow:hidden;background:#fff;border:var(--line);border-radius:26px}
.field-flower{position:absolute;font-size:5rem;color:var(--paper);opacity:.7}.flower-a{left:4%;top:8%;transform:rotate(-12deg)}.flower-b{right:3%;bottom:10%;transform:rotate(22deg)}
.paper{width:min(59.2vh,576px);height:auto;background:transparent;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;padding:0;position:relative;overflow:hidden}
.stage{position:relative;width:100%;aspect-ratio:4/5;flex:none;overflow:hidden}
.asset{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.outline{z-index:2}
.skin-fill,.hair-fill,.garment-fill,.top-fill,.bottom-fill,.swim-top-fill,.swim-bottom-fill,.swim-string-fill,.socks-fill,.socks-fill-alt,.footwear-fill,.footwear-fill-alt,.outer-fill{z-index:1;background:var(--fill);-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.skin-fill{--fill:#d6a477;--mask:url("assets/BODY_FILL2.svg")}
.hair-fill{--fill:#6d3f2d;--mask:url("assets/LONG_BOB_FILL2.svg");z-index:8}
.hair-outline{z-index:8;display:block;visibility:visible;opacity:1}
.garment-fill,.garment-outline,.top-fill,.top-outline,.bottom-fill,.bottom-outline,.swim-top-fill,.swim-top-outline,.swim-bottom-fill,.swim-bottom-outline,.swim-string-fill{z-index:5}
.paper.pants-selected .bottom-fill,.paper.pants-selected .bottom-outline{z-index:5}
.paper.pants-selected .top-fill,.paper.pants-selected .top-outline{z-index:6}
.outer-fill,.outer-outline{z-index:7}
.accessory-stack{position:absolute;inset:0;pointer-events:none}
.accessory-stack .accessory-fill{background-color:var(--accessory-color,#ef5749);background-image:var(--accessory-pattern,none);background-size:var(--accessory-pattern-size,28px) var(--accessory-pattern-size,28px);-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.accessory-stack .accessory-glasses,.accessory-stack .accessory-handbag,.accessory-stack .accessory-neckscarf{z-index:7;visibility:visible;opacity:1}
.accessory-stack .accessory-scarf{z-index:9}
.boat-tote-monogram{position:absolute;z-index:11;transform:translate(-50%,-50%);font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;letter-spacing:.025em;white-space:nowrap;-webkit-text-stroke:1px #000;paint-order:stroke fill;pointer-events:auto;touch-action:none;cursor:grab;user-select:none}.boat-tote-monogram:active{cursor:grabbing}.boat-tote-monogram:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.top-fill{background-color:var(--top-color,#f34d38);background-image:var(--top-pattern,none);background-size:var(--top-pattern-size,34px) var(--top-pattern-size,34px)}
.bottom-fill{background-color:var(--bottom-color,#4672ce);background-image:var(--bottom-pattern,none);background-size:var(--bottom-pattern-size,34px) var(--bottom-pattern-size,34px)}
.garment-fill{background-color:var(--garment-color,#f34d38);background-image:var(--garment-pattern,none);background-size:var(--garment-pattern-size,34px) var(--garment-pattern-size,34px)}
.swim-top-fill{background-color:var(--swimTop-color,#fb5797);background-image:var(--swimTop-pattern,none);background-size:var(--swimTop-pattern-size,34px) var(--swimTop-pattern-size,34px)}
.swim-bottom-fill{background-color:var(--swimTop-color,#fb5797);background-image:var(--swimTop-pattern,none);background-size:var(--swimTop-pattern-size,34px) var(--swimTop-pattern-size,34px)}
.swim-string-fill{background-color:var(--swimString-color,#162455)}
.outer-fill{background-color:var(--outer-color,#20336b);background-image:var(--outer-pattern,none);background-size:var(--outer-pattern-size,42px) var(--outer-pattern-size,42px)}
.hidden{display:none}
.socks-fill,.socks-fill-alt{z-index:4;background-color:var(--sock-color,#fff);background-image:var(--sock-pattern,none);background-size:var(--sock-pattern-size,22px) var(--sock-pattern-size,22px)}
.socks-outline{z-index:4}
.footwear-fill{--mask:url("assets/LOAFER_FILL.svg");z-index:4;background-color:var(--footwear-color,#142c3f);background-image:var(--footwear-pattern,none);background-size:var(--footwear-pattern-size,22px) var(--footwear-pattern-size,22px)}
.footwear-fill-alt{z-index:4;background-color:var(--trackShoe2-color,#f1523c)}
.paper.flats-selected .footwear-fill{background-color:var(--flat1-color,#f1523c);background-image:none}
.paper.flats-selected .footwear-fill-alt{background-color:var(--footwear-color,#142c3f);background-image:var(--footwear-pattern,none);background-size:var(--footwear-pattern-size,22px) var(--footwear-pattern-size,22px)}
.footwear-outline{z-index:4}
.signature{display:flex;justify-content:center;align-items:center;text-align:center;margin:0;padding:5px 8px;min-height:72px;font-family:"Myriad Pro",Myriad,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:3.15rem;line-height:1;letter-spacing:-.035em;white-space:pre}
.signature span{display:inline-block;color:var(--letter-color);-webkit-text-stroke:1px var(--navy);paint-order:stroke fill;filter:drop-shadow(.35px .35px 0 var(--navy))}
.signature.empty{visibility:hidden}
.wardrobe{background:#fff;border-left:var(--line);padding:24px clamp(18px,3vw,42px);overflow:auto;max-height:calc(100vh - 88px)}
.tabs{display:flex;overflow-x:auto;border-bottom:var(--line);margin-bottom:22px}
.tabs button{flex:1 1 0;border:0;background:transparent;padding:12px 7px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:700;font-size:1rem;cursor:pointer;opacity:.48}
.tabs button[aria-selected="true"]{opacity:1;border-bottom:5px solid var(--red)}
.panel{display:none}.panel.active{display:block}
.subtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin:0 0 18px}
.subtabs button{border:var(--line);border-radius:999px;background:#fff;padding:10px 8px;font-weight:800;cursor:pointer}
.subtabs button[aria-selected="true"]{background:var(--yellow)}
.item-tabs{position:sticky;top:-24px;z-index:11;background:#fff;padding:14px 0 12px;margin-bottom:12px;border-bottom:var(--line);display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.item-tabs button{flex:0 0 auto;border:var(--line);border-radius:999px;background:#fff;padding:9px 14px;font-weight:800;cursor:pointer;white-space:nowrap}
.item-tabs button[aria-selected="true"]{background:var(--yellow);box-shadow:2px 2px 0 var(--navy)}
.apparel-item-panel,.onepiece-style-panel,.footwear-item-panel{display:none}
.apparel-item-panel.active,.onepiece-style-panel.active,.footwear-item-panel.active{display:block}
.nested-item-tabs{position:static;padding:0 0 12px;border-bottom:0;margin:8px 0 4px}
.accessory-panel{display:none}.accessory-panel.active{display:block}
.section-heading{display:flex;align-items:center;gap:9px;margin:22px 0 10px}
.section-heading span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:.7rem;font-weight:900}
.section-heading h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-size:1.2rem;margin:0;letter-spacing:-.02em}
.style-label{margin:16px 0 8px;font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.monogram-additional{border-top:1px solid var(--navy);margin-top:26px;padding-top:6px}
.monogram-toggle{display:flex;align-items:center;gap:10px;font-weight:800;margin:12px 0}.monogram-toggle input{width:20px;height:20px;accent-color:var(--navy)}
.monogram-input{display:block;width:8rem;min-height:44px;border:var(--line);border-radius:10px;padding:8px 12px;text-transform:uppercase;font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;font-weight:700;letter-spacing:.06em;color:var(--navy);background:#fff}
.field-hint{display:block;margin-top:5px;font-size:.78rem;color:var(--navy);opacity:.72}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{background:#fffdf7;border:1.5px solid var(--navy);border-radius:12px;min-height:48px;padding:10px 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;text-align:center}
.choice:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--navy)}
.choice.selected{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--navy)}
.swatches{display:flex;flex-wrap:wrap;gap:11px}
.swatch{width:46px;height:44px;border:0;border-radius:58% 42% 54% 46%/48% 57% 43% 52%;background:var(--swatch);cursor:pointer;position:relative;transform:rotate(-3deg)}
.swatch:nth-child(3n+2){border-radius:43% 57% 47% 53%/58% 44% 56% 42%;transform:rotate(2deg)}
.swatch:nth-child(3n){border-radius:54% 46% 59% 41%/42% 55% 45% 58%;transform:rotate(4deg)}
.swatch:nth-child(4n){width:43px;height:46px}
.swatch.light-swatch{box-shadow:inset 0 0 0 1px #8fb4dc}
.swatch.selected{box-shadow:0 0 0 3px rgba(42,169,221,.42),inset 0 0 0 2px rgba(255,255,255,.6)}
.swatch.selected::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.swatches.disabled-colors{opacity:.3}
.swatches.disabled-colors::after{content:"Choose None to use a solid color";flex-basis:100%;font-size:.75rem;font-weight:700;opacity:1}
.swatch:disabled{cursor:not-allowed}
.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pattern{height:70px;border:2px solid var(--navy);border-radius:10px;cursor:pointer;background-color:#fff;background-position:center;background-size:cover;display:grid;place-items:center;color:var(--navy);font-weight:800}
.pattern.selected{box-shadow:0 0 0 4px var(--yellow)}
.pattern-none-label{padding:5px 8px;border-radius:999px;background:#fff}
.scale-control{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;margin-top:24px;border-top:1px solid rgba(20,44,63,.25);padding-top:20px}
.scale-control.disabled-scale{opacity:.35}
.scale-control>span{display:flex;flex-direction:column}.scale-control small{display:flex;justify-content:space-between;font-size:.68rem;margin-top:3px}
.scale-control input{width:100%;accent-color:var(--red)}
.custom-text-control{display:grid;gap:7px;font-weight:700}
.custom-text-control span{font-size:.8rem}
.custom-text-control input{width:100%;border:2px solid #000;border-radius:12px;background:#fff;color:#000;padding:12px 14px;min-height:46px}
.hint{text-align:center;font-size:.8rem;opacity:.7;margin-top:24px}
.mobile-actions{display:none}
dialog{border:var(--line);border-radius:20px;background:var(--paper);color:var(--navy);max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto;width:calc(100% - 32px);padding:28px;box-shadow:10px 10px 0 var(--navy)}
dialog::backdrop{background:rgba(20,44,63,.72)}
dialog h2{font:800 2rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif;margin:5px 0 10px;letter-spacing:-.04em}dialog p{line-height:1.5}
.dialog-close{float:right;border:0;background:transparent;font-size:1.8rem;cursor:pointer}.wide{width:100%}
.save-preview{aspect-ratio:8/11;background:#fff;border:1px solid var(--navy);margin:16px auto;max-height:35vh;display:grid;place-items:center;overflow:hidden}
.save-preview canvas,.save-preview img{width:100%;height:100%;object-fit:contain}
.save-preview img{-webkit-touch-callout:default}
#shareCaptionControls[hidden],#shareImage[hidden]{display:none}
#shareCaptionControls{margin:12px 0}
#shareCaptionControls label{display:block;font-weight:800;margin-bottom:6px}
#shareCaption{box-sizing:border-box;width:100%;min-height:76px;resize:vertical;border:1px solid var(--navy);border-radius:10px;padding:10px;font:inherit;color:var(--navy);background:#fff}
#copyCaption{margin:8px 0}
#shareImage{margin-bottom:10px}
#openImage{display:block;text-align:center;margin-top:12px;font-weight:700}
#openImage[hidden]{display:none}
@media(max-width:900px){.masthead{height:74px}.header-actions{display:none}.studio{display:block;min-height:auto}.canvas-column{padding:12px}.field{min-height:58vh}.paper{width:min(70vw,470px)}.wardrobe{border-left:0;border-top:var(--line);max-height:none;padding-bottom:90px}.mobile-actions{display:flex;justify-content:center;gap:10px;margin-top:12px;position:sticky;top:8px;z-index:12}.choice-grid{grid-template-columns:repeat(3,1fr)}.tabs{overflow-x:auto}.item-tabs{top:0}}
@media(max-width:460px){.brand{gap:10px}.brand-logo{height:52px}.brand-subtitle{font-size:2.4rem;letter-spacing:-.02em}.signature{font-size:2.65rem;min-height:56px}.choice-grid.compact,.pattern-grid{grid-template-columns:repeat(3,1fr)}.subtabs{grid-template-columns:repeat(2,1fr)}.wardrobe{padding-inline:14px}.field{border-radius:18px}.paper{width:min(88vw,390px);height:auto}.stage{aspect-ratio:4/5}.scale-control{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.choice,.primary-button{transition:.15s ease}.panel.active{animation:appear .2s ease}@keyframes appear{from{opacity:0;transform:translateY(4px)}}}

.accessory-stack .accessory-belt{z-index:6}
.accessory-stack .accessory-mustache{z-index:10}
.accessory-stack .accessory-image{z-index:7}
.pearls-selected > .style-label,.pearls-selected > .swatches,.pearls-selected > .pattern-grid,.pearls-selected > .scale-control{display:none}

.graphic-tee-overlay{z-index:6}