:root{--navy:#0E1A2B;--gold:#E0A526;--paper:#F4F1EA;--bg:#faf9f6;--panel:#fff;--text:#0E1A2B;--muted:#626975;--line:#e1e1dc;--stage:#e9e9e4;--button:#0E1A2B;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Barlow,Arial,sans-serif;font-size:15px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}a{color:inherit;text-decoration:none}.header{height:86px;padding:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--panel)}.logo{width:185px;height:auto;display:block}.dark-logo{display:none}.studio-tag{font-weight:700;letter-spacing:2px;font-size:12px;display:flex;gap:18px;align-items:center}.studio-tag span{font-size:9px;background:var(--paper);color:var(--navy);border:1px solid #d8d4c8;padding:6px 8px;letter-spacing:1px}.quiet{border:0;background:none;color:var(--text);min-height:44px;padding:8px 10px}.intro{display:flex;justify-content:space-between;align-items:center;margin:42px 0 32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 9px;color:var(--muted)}h1,h2,p{margin-top:0}h1{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;font-size:clamp(42px,5vw,72px);line-height:1;margin:0;letter-spacing:-1.5px}h1 em{color:var(--gold);font-style:normal}.intro>p{color:var(--muted);line-height:1.7;font-size:14px;margin:0}main{max-width:1500px;margin:auto;padding:0 4%}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(350px,.85fr);align-items:start;gap:28px}.viewer{position:sticky;top:20px;background:var(--stage);border:1px solid var(--line);border-radius:3px;overflow:hidden}.viewer-top{display:flex;justify-content:space-between;align-items:center;padding:26px 26px 0;position:relative;z-index:1}.viewer h2{font-family:'Big Shoulders Display',sans-serif;font-size:26px;margin:0}.view-toggle{display:flex;border:1px solid #c7c9c8;border-radius:24px;padding:3px;background:var(--panel)}.view-toggle button{border:0;border-radius:22px;min-width:65px;min-height:38px;padding:6px 14px;background:transparent;color:var(--muted);font-size:12px;font-weight:600}.view-toggle button[aria-pressed=true]{background:var(--navy);color:#fff}.canvas-wrap{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#fcfcfa88,transparent 65%);isolation:isolate}.watermark{position:absolute;font-family:'Big Shoulders Display',sans-serif;font-size:clamp(48px,6.4vw,100px);font-weight:900;letter-spacing:6px;opacity:.045;top:36%;pointer-events:none}#preview{width:100%;height:100%;position:relative;filter:drop-shadow(0px 22px 18px #00000017)}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--stage);color:var(--muted);font-weight:600}#loading[hidden]{display:none}.viewer-bottom{display:flex;justify-content:space-between;margin:0 26px;padding:18px 0;border-top:1px solid #bdc1c177;font-size:9px;font-weight:600;letter-spacing:1.5px}.viewer-bottom b{color:var(--gold);font-size:15px;margin-left:8px}.palette-summary{background:var(--panel);padding:16px 26px;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}#palette-dots{display:flex;gap:4px}#palette-dots i{height:14px;width:14px;border-radius:50%;border:1px solid #80808044}.controls{border:1px solid var(--line);border-radius:3px;background:var(--panel)}.control-section{padding:24px;border-bottom:1px solid var(--line)}.section-heading{display:flex;gap:12px;align-items:center;margin-bottom:18px}.section-heading>span{font-size:10px;font-weight:600;color:#8a9098}.section-heading h2{font-size:20px;font-family:'Big Shoulders Display',sans-serif;font-weight:900;letter-spacing:.1px;margin:0}.garment-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.garment-grid button{display:grid;justify-items:center;align-content:center;gap:8px;min-height:80px;padding:10px 3px;background:var(--bg);border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:10px;font-weight:600}.garment-grid svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.garment-grid button[aria-pressed=true]{background:var(--navy);color:var(--gold);border-color:var(--navy)}.colour-zones{display:flex;gap:8px}.colour-zones button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;flex:1;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:3px;font-size:12px}.colour-zones button[aria-pressed=true]{border-color:var(--text);box-shadow:inset 0 -2px var(--text)}.colour-zones i{width:16px;height:16px;border-radius:50%;border:1px solid #8885}.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:12px 0 5px}.swatches button{border:0;background:none;min-height:40px;min-width:24px;padding:4px;display:grid;place-items:center}.swatches button i{display:block;width:23px;height:23px;border-radius:50%;border:1px solid #8884}.swatches button[aria-pressed=true] i{outline:1px solid var(--text);outline-offset:3px}.custom-colour{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600}.custom-colour span{margin-left:auto;font-weight:400;color:var(--muted)}input[type=color]{height:34px;width:42px;padding:2px;border:1px solid var(--line);border-radius:3px;background:var(--bg);cursor:pointer}.pattern-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.pattern-grid button{background:none;border:1px solid transparent;border-radius:3px;padding:4px;color:var(--muted);font-size:10px;min-height:65px}.pattern-grid button[aria-pressed=true]{border-color:var(--gold);background:#e0a5260d;color:var(--text)}.pattern-chip{display:block;height:34px;width:100%;border-radius:2px;margin-bottom:6px;background:var(--navy);border:1px solid #80808033}.pattern-chip.hoops{background:repeating-linear-gradient(0deg,var(--navy) 0 8px,var(--gold) 8px 12px)}.pattern-chip.stripes{background:repeating-linear-gradient(90deg,var(--navy) 0 8px,var(--gold) 8px 12px)}.pattern-chip.pinstripe{background:repeating-linear-gradient(90deg,var(--navy) 0 9px,var(--gold) 9px 10px)}.pattern-chip.sash{background:linear-gradient(135deg,var(--navy) 38%,var(--gold) 38% 60%,var(--navy) 60%)}.pattern-chip.halves{background:linear-gradient(90deg,var(--navy) 50%,var(--gold) 50%)}.pattern-chip.fade{background:linear-gradient(0deg,var(--gold),var(--navy) 85%)}.pattern-chip.shards{background:conic-gradient(from 20deg,var(--gold) 0 20%,var(--navy) 20% 65%,#38414d 65% 80%,var(--navy) 80%)}.pattern-chip.camo{background:radial-gradient(ellipse at 20% 70%,#65717e 20%,transparent 22%),radial-gradient(ellipse at 75% 15%,var(--gold) 27%,transparent 29%),var(--navy)}.pattern-chip.gradient{background:linear-gradient(135deg,var(--navy),var(--gold))}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}label{display:block;font-size:12px;font-weight:600}label small{color:var(--muted);font-weight:400;margin-left:3px}input[type=text],select{display:block;width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);min-height:43px;padding:9px 11px;border-radius:3px;margin-top:7px;font-size:14px}#ink{display:block;width:100%;height:43px;margin-top:7px}.upload-label{position:relative;border:1px dashed #a6aab0;background:var(--bg);display:flex;align-items:center;justify-content:center;gap:12px;padding:17px;cursor:pointer;font-size:22px}.upload-label b{display:block;font-size:12px}.upload-label small{display:block;font-size:10px;margin:4px 0 0}.upload-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}#crest-tools{display:flex;align-items:center;justify-content:space-between;margin-top:12px}#crest-tools[hidden]{display:none}#crest-tools label{display:flex;gap:8px;align-items:center}#crest-scale{width:90px;accent-color:var(--gold)}.hint{color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 0}.actions{padding:24px;display:grid;gap:10px}.primary,.secondary{min-height:48px;border-radius:3px;font-weight:600;padding:13px 17px;font-size:14px}.primary{background:var(--gold);border:1px solid var(--gold);color:var(--navy);display:flex;justify-content:space-between;align-items:center}.secondary{background:var(--panel);border:1px solid var(--line);color:var(--text)}.actions>p{margin:4px 0 0;text-align:center;font-size:11px;color:var(--muted)}.status{color:var(--muted);font-size:12px;line-height:1.5;margin:8px 0 0}.status:empty{display:none}.reassurance{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.4px;color:var(--muted);padding:35px 0;margin-top:30px;border-top:1px solid var(--line)}footer{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:var(--paper);padding:32px 4%;gap:20px;font-size:12px}footer>span{font-weight:700;letter-spacing:2px}footer small{display:block;font-size:10px;letter-spacing:0;font-weight:400;opacity:.65;margin-top:6px}
html[data-theme=dark]{--bg:#0a1320;--panel:#111f31;--text:#f4f1ea;--muted:#b2bbc5;--line:#2b3849;--stage:#1b2a3c;color-scheme:dark}html[data-theme=dark] .light-logo{display:none}html[data-theme=dark] .dark-logo{display:block}html[data-theme=dark] .canvas-wrap{background:radial-gradient(ellipse at 50% 40%,#60718433,transparent 70%)}
@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1.5fr) minmax(390px,.85fr)}}
@media(max-width:850px){main{padding:0 20px}.workspace{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:16px}.header{padding:0 20px}.control-section,.actions{padding:18px}.garment-grid{gap:3px}.studio-tag span{display:none}.intro>p{max-width:225px}.viewer-top{padding:18px 16px 0}.viewer h2{font-size:22px}.view-toggle button{padding:6px 9px;min-width:50px}.viewer-bottom{margin:0 16px;font-size:8px}.palette-summary{padding:15px;font-size:10px}}
@media(max-width:680px){.header{height:68px;padding:0 18px}.logo{width:141px}.studio-tag{font-size:9px;letter-spacing:1.3px}.quiet span{display:none}main{padding:0 16px}.intro{margin:25px 0 22px;align-items:flex-start}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:46px;letter-spacing:-1px}.intro>p{font-size:11px;max-width:140px;line-height:1.5;margin-top:17px}.workspace{display:flex;flex-direction:column;gap:18px}.viewer{position:relative;top:auto;width:100%}.viewer-top{padding:18px 17px 0}.viewer .eyebrow{font-size:8px}.viewer h2{font-size:23px}.canvas-wrap{margin-top:5px}.watermark{font-size:49px}.viewer-bottom{padding:13px 0;margin:0 18px;font-size:8px}.palette-summary{padding:13px 18px;font-size:11px}.controls{width:100%}.control-section{padding:22px 20px}.section-heading h2{font-size:22px}.garment-grid button{min-height:76px}.pattern-grid{gap:7px}.pattern-grid button{min-height:69px}.swatches{gap:4px}.swatches button{min-height:44px}.actions{padding:22px 20px}.primary,.secondary{min-height:50px}.reassurance{font-size:8px;gap:15px;letter-spacing:.6px;padding:24px 0;margin-top:22px}footer{flex-direction:column;align-items:flex-start;padding:28px 22px;gap:20px}input[type=text],select{font-size:16px}}
.sport-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 24px;padding:20px 24px;background:var(--panel);border:1px solid var(--line)}.sport-bar label{width:min(100%,350px)}.sport-bar select{margin-top:7px;background:var(--panel);font-size:17px;font-weight:600}.sport-bar p{font-size:12px;color:var(--muted);margin:0}.material-caption{margin:0;padding:0 26px 16px;background:var(--panel);color:var(--muted);font-size:11px;line-height:1.5}.garment-grid{grid-template-columns:repeat(auto-fit,minmax(66px,1fr))}@media(max-width:680px){.sport-bar{padding:16px;display:block;margin-bottom:16px}.sport-bar p{font-size:10px;margin:10px 0 0}.sport-bar label{width:100%}.material-caption{padding:0 18px 14px}.garment-grid{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}}

@media(min-width:681px){.canvas-wrap{aspect-ratio:auto;height:min(45vw,calc(100vh - 230px));max-height:650px;min-height:300px;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}#preview{object-fit:contain;min-width:0;min-height:0}}

#position-field[hidden]{display:none}