:root{--bg:#101114;--surface:#17191d;--raised:#202329;--border:#30343c;--text:#eeede9;--muted:#a3a6ae;--accent:#ff7042;--accent-dim:#39231d;--green:#a3d9ad;--font-body:'Satoshi',sans-serif;--font-display:'Clash Display','Satoshi',sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:clamp(1.5rem,2vw,2rem);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-synthesis:none}body{background:var(--bg);color:var(--text);font:var(--text-sm)/1.5 var(--font-body);min-width:320px}button,input,select{font:inherit;color:inherit}button,a,input,select{transition:background .15s,border-color .15s,color .15s}button{cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:disabled,select:disabled,input:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}h1,h2{font-family:var(--font-display);font-weight:500;line-height:1.2}h1{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-2)}h2{font-size:var(--text-lg)}p{line-height:1.6}.muted{color:var(--muted)}.small,small{font-size:var(--text-xs)}.full{width:100%}.eyebrow{font-size:var(--text-xs);letter-spacing:.1em;font-weight:700;color:var(--muted)}
.top{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 var(--space-8);gap:var(--space-6)}.wordmark{font:600 26px/1 var(--font-display);letter-spacing:-.04em;flex-shrink:0}.wordmark span{display:block;font:700 var(--text-xs)/1.5 var(--font-body);letter-spacing:.1em;color:var(--muted);margin-top:var(--space-2)}nav{display:flex;gap:var(--space-6);align-items:center}nav a,nav .quiet{color:var(--muted)}nav a:hover{color:var(--text)}nav .current{color:var(--accent)}.primary{padding:var(--space-3) var(--space-5);border:1px solid var(--accent);background:var(--accent);color:#1c120d;font-weight:700;border-radius:7px;white-space:nowrap}.primary:hover{background:#ff8c66}.quiet{padding:var(--space-2) var(--space-3);background:var(--raised);border:1px solid var(--border);border-radius:6px}.quiet:hover{border-color:var(--muted)}.danger{color:#ffa69e}
.workspace{display:grid;grid-template-columns:288px minmax(360px,1fr) 288px;max-width:1920px;margin:auto}.left,.right{background:var(--surface);min-width:0}.left{border-right:1px solid var(--border)}.right{border-left:1px solid var(--border)}.section{padding:var(--space-5);border-bottom:1px solid var(--border)}.section h2{margin-top:var(--space-3)}.section-title{display:flex;justify-content:space-between;align-items:center}.intro{font-size:var(--text-sm)}.label{display:block;margin:var(--space-4) 0 var(--space-2);font-weight:500;font-size:var(--text-xs)}input[type=text],input:not([type]),select{width:100%;background:var(--bg);border:1px solid var(--border);padding:var(--space-3);border-radius:6px;min-height:44px}select{padding-right:var(--space-6)}select+p{margin-top:var(--space-2)}input[type=color]{width:44px;height:38px;padding:var(--space-1);border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer}.color-row{display:flex;gap:var(--space-2);align-items:center}.color-row input:not([type=color]){min-width:0;padding:var(--space-2)}.vehicle-reference{position:relative;margin-top:var(--space-4);border-radius:6px;background:#ececee;overflow:hidden}.vehicle-reference img{display:block;width:100%;height:105px;object-fit:contain}.vehicle-reference span{display:block;font-size:var(--text-xs);text-align:center;color:#4b4e56;padding:var(--space-1) var(--space-2);background:#e1e2e5}.themes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.theme{border:1px solid var(--border);border-radius:6px;background:var(--bg);text-align:left;padding:var(--space-2);font-size:var(--text-xs)}.theme:hover{border-color:var(--muted)}.theme.selected{border-color:var(--accent);color:var(--accent)}.sample{display:block;height:30px;border-radius:3px;margin-bottom:var(--space-2)}.solid{background:#b6c1d3}.shimmer{background:linear-gradient(115deg,#887c90,#ffc1df 33%,#b7bbcf 50%,#f7a1ce 75%,#645c70)}.stripes{background:linear-gradient(115deg,#182c39 35%,#f2f0eb 35% 45%,#ff7042 45% 55%,#182c39 55%)}.camo{background:repeating-linear-gradient(130deg,#26392a 0 20%,#65745a 20% 35%,#384432 35% 55%)}.themes+p{margin-top:var(--space-3)}
.upload{display:flex;align-items:center;flex-direction:column;text-align:center;border:1px dashed #60616a;background:#1b1d22;border-radius:8px;padding:var(--space-5) var(--space-2);margin-top:var(--space-4);cursor:pointer}.upload:hover,.upload.dragging{background:var(--accent-dim);border-color:var(--accent)}.upload-plus{font-size:var(--text-xl);color:var(--accent)}.upload strong{font-size:var(--text-sm);font-weight:500}.upload span:not(.upload-plus),.upload small{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}.text-row{display:flex;gap:var(--space-2)}.text-row input{min-width:0;font-size:var(--text-xs)}.layer-section>p{margin-top:var(--space-3)}.layer-section>.quiet{margin-top:var(--space-4)}.layer{display:flex;gap:var(--space-3);align-items:center;width:100%;padding:var(--space-2);margin-top:var(--space-2);border:1px solid var(--border);border-radius:6px;background:var(--bg);text-align:left}.layer.selected{border-color:var(--accent);background:var(--accent-dim)}.layer img,.layer .text-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;background:var(--raised);flex-shrink:0}.text-thumb{display:grid;place-items:center;font-weight:700}.layer .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs)}.layer span:last-child{min-width:0}.layer .scope{display:block;font-size:var(--text-xs);color:var(--muted)}.layer-section{max-height:none}
.center{padding:var(--space-8);min-width:0;background:radial-gradient(ellipse at 50% 30%,#1c2027,transparent 65%)}.canvas-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}.canvas-heading h2{font-size:var(--text-xl);margin-top:var(--space-2)}.pill{font-size:var(--text-xs);color:var(--muted);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:20px;white-space:nowrap}.canvas-toolbar{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;margin:var(--space-6) 0 var(--space-4);flex-wrap:wrap}.seg{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--surface);border:1px solid var(--border);border-radius:6px}.seg button{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);background:transparent;color:var(--muted);border-radius:4px}.seg button.active{background:var(--raised);color:var(--text)}.check{display:flex;align-items:center;gap:var(--space-2);color:var(--muted)}input[type=checkbox]{accent-color:var(--accent)}.canvas-well{position:relative;min-height:300px;padding:var(--space-6);border:1px solid var(--border);border-radius:10px;background:#0b0c0e;overflow:auto;display:flex;justify-content:center;align-items:flex-start}.canvas-wrap{position:relative;width:100%;max-width:740px;flex-shrink:0;box-shadow:0 12px 40px #0006}.canvas-wrap canvas{display:block;width:100%;height:auto}#design-canvas{cursor:crosshair;touch-action:none}#guide-canvas{position:absolute;inset:0;pointer-events:none}.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--muted)}.loading[hidden]{display:none}.canvas-footer{display:flex;gap:var(--space-3);justify-content:space-between;margin:var(--space-3) 0 var(--space-6);font-size:var(--text-xs);color:var(--muted);flex-wrap:wrap}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:var(--space-1)}.workflow-note{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--border);border-radius:8px;background:var(--surface)}.workflow-note strong{font-size:var(--text-sm);font-weight:500}.workflow-note span{font-size:var(--text-xs);color:var(--muted)}.preview-caveat{display:flex;gap:var(--space-4);padding:var(--space-5) 0;font-size:var(--text-xs);color:var(--muted)}.preview-caveat>span{white-space:nowrap;color:var(--accent)}.range-label{display:flex;justify-content:space-between;align-items:baseline;margin:var(--space-4) 0 var(--space-2);font-size:var(--text-xs)}output{color:var(--accent);font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;accent-color:var(--accent);height:20px}.range-label+input+.quiet{margin-top:var(--space-2)}.button-row{display:flex;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-xs)}.button-row button{flex:1}.checks{list-style:none;margin:var(--space-4) 0;display:grid;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted)}.checks li::before{content:'✓';color:var(--green);margin-right:var(--space-2)}.filename-preview{word-break:break-all;color:var(--accent);margin-top:var(--space-2)}.export-section>p{margin-top:var(--space-3);min-height:40px}.export-section>.quiet{margin-top:var(--space-3);font-size:var(--text-xs)}.provenance a{font-size:var(--text-xs);color:var(--accent)}.provenance p{margin-top:var(--space-3)}
dialog{width:min(620px,calc(100% - 32px));max-height:85dvh;overflow:auto;margin:auto;padding:var(--space-8);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-6)}.dialog-close{float:right;font-size:var(--text-xs);margin-left:var(--space-3)}.help-steps{padding-left:var(--space-5);display:grid;gap:var(--space-5)}.help-steps strong{font-weight:700}.help-steps p{margin-top:var(--space-2);color:var(--muted)}dialog details{margin:var(--space-6) 0;padding:var(--space-4);background:var(--bg);border-radius:6px}dialog details p{margin-top:var(--space-3);color:var(--muted)}dialog summary{cursor:pointer}dialog>a{display:block;margin-top:var(--space-4);color:var(--accent)}#status-toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);z-index:20;padding:var(--space-3) var(--space-5);border:1px solid var(--border);background:var(--raised);border-radius:8px;max-width:90%;box-shadow:0 8px 30px #0007;opacity:0;pointer-events:none}#status-toast.show{opacity:1}
@media(min-width:1250px){.left,.right{height:calc(100dvh - 84px);overflow:auto}.center{height:calc(100dvh - 84px);overflow:auto}.canvas-well{max-height:calc(100dvh - 370px);min-height:320px}.canvas-wrap{width:min(100%,calc(100dvh - 445px));min-width:260px}}
@media(max-width:1249px){.workspace{grid-template-columns:245px minmax(300px,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border);border-left:0}.top{padding:var(--space-4);height:auto;min-height:84px;flex-wrap:wrap;gap:var(--space-4)}nav{gap:var(--space-3);font-size:var(--text-xs)}.center{padding:var(--space-5)}.canvas-well{padding:var(--space-3)}}
@media(max-width:700px){.top{padding:var(--space-4);gap:var(--space-3)}.top>.primary{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}nav{order:3;width:100%;justify-content:space-between;gap:var(--space-2)}nav>.quiet{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.wordmark{font-size:24px}.wordmark span{font-size:var(--text-xs)}.workspace{display:flex;flex-direction:column}.left,.right{border:0;display:block}.left{display:contents}.left>.section:first-child{order:0}.center{order:1;padding:var(--space-4)}.left>.section:not(:first-child){order:2}.right{order:3}.vehicle-reference{display:none}.section{padding:var(--space-4)}.canvas-heading h2{font-size:var(--text-lg)}.canvas-heading{align-items:flex-start}.pill{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.canvas-toolbar{gap:var(--space-2);margin-top:var(--space-4)}.canvas-well{min-height:200px;padding:var(--space-2)}.canvas-wrap{width:100%}.preview-caveat{padding-bottom:0}.range-label{margin-top:var(--space-5)}.themes{grid-template-columns:repeat(4,1fr)}.theme{font-size:var(--text-xs)}.upload{padding:var(--space-4)}.right .provenance{padding-bottom:var(--space-8)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sunset{background:linear-gradient(135deg,#402b68,#f38f75,#efc493)}.galaxy{background:radial-gradient(ellipse at 30% 70%,#b56fa1,transparent 45%),linear-gradient(115deg,#151b3b,#6a4b91,#1f4865)}.ocean{background:linear-gradient(130deg,#103547,#21869a,#9cdbda)}.carbon{background:repeating-linear-gradient(45deg,#34373c 0 4px,#191b20 4px 8px)}.background-upload{display:block;text-align:center;font-size:var(--text-xs);cursor:pointer;margin-top:var(--space-3)}#remove-background{font-size:var(--text-xs);margin-top:var(--space-2)}#remove-background[hidden]{display:none}.studio-label{display:flex;gap:var(--space-2);align-items:center;color:var(--muted)}.studio-label select{padding:var(--space-1) var(--space-2);min-height:30px;font-size:var(--text-xs);width:auto}.canvas-well[data-studio=checker]{background-color:#22252b;background-image:conic-gradient(#2b2f36 25%,transparent 0 50%,#2b2f36 0 75%,transparent 0);background-size:24px 24px}.canvas-well[data-studio=warm]{background:radial-gradient(ellipse at 50% 30%,#605249,#2b2420)}.provenance .small{overflow-wrap:anywhere}
@media(min-width:1250px) and (max-height:650px){.left,.right,.center{height:auto;overflow:visible}.canvas-well{max-height:none}.canvas-wrap{width:min(100%,420px)}}
.collection-tabs{margin-bottom:var(--space-3)}.collection-tabs button{flex:1;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.collection-count{font-size:var(--text-xs);background:var(--accent-dim);color:var(--accent);border-radius:10px;padding:0 var(--space-2)}.themes[hidden],.holiday-settings[hidden],#photo-style-group[hidden]{display:none}.holiday-grid .sample{height:64px;background:#242930;overflow:hidden}.holiday-grid canvas{display:block;width:100%;height:100%;object-fit:cover}.holiday-grid .theme{line-height:1.4}.holiday-description{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--border);border-radius:6px;background:var(--bg)}.holiday-description>span{font-weight:700;color:var(--text);font-size:var(--text-sm)}.holiday-description>p{margin-top:var(--space-2)}.holiday-settings>.quiet{margin-top:var(--space-3);font-size:var(--text-xs)}.photo-mode{margin-top:var(--space-4)}.photo-mode>button{flex:1}.photo-mode+p{margin-top:var(--space-2)}.layer.photo-hidden{opacity:.6}.layer .scope.hidden-note{color:#ffba9e}.photo-style-notice{color:var(--accent)}#photo-style-group>p{margin-top:var(--space-2)}
@media(max-width:700px){.holiday-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.holiday-grid .sample{height:72px}.holiday-grid .theme{font-size:var(--text-sm)}.collection-tabs button{min-height:36px}}
nav{flex-wrap:wrap}.quest-info{border-top:1px solid var(--border);padding-top:var(--space-5);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.quest-info>div{width:100%}.quest-info h2{margin:var(--space-2) 0}.quest-info>p{width:100%}.quest-info .quiet{font-size:var(--text-xs)}#install-app[hidden]{display:none}#quest-dialog{width:min(1160px,calc(100% - 24px));max-height:96dvh;padding:var(--space-5)}.quest-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.quest-dialog-heading h2{margin:var(--space-2) 0 var(--space-3)}#quest-dialog>.small{margin:var(--space-2) 0}#quest-stage{height:clamp(300px,61dvh,650px);margin:var(--space-4) 0;background:#0a111b;border:1px solid var(--border);border-radius:8px;overflow:hidden;position:relative}#quest-stage canvas{display:block;width:100%;height:100%;touch-action:none}.quest-action-bar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.quest-action-bar>span{flex:1;min-width:220px}.quest-action-bar>button{font-size:var(--text-sm)}[data-quest-ui=true] button,[data-quest-ui=true] select,[data-quest-ui=true] .upload{min-height:48px}[data-quest-ui=true] input[type=range]{height:36px}[data-quest-ui=true] .label,[data-quest-ui=true] .range-label,[data-quest-ui=true] .theme{font-size:var(--text-sm)}[data-quest-ui=true] .section{padding:var(--space-6)}[data-quest-ui=true] .left,[data-quest-ui=true] .right,[data-quest-ui=true] .center{height:auto;overflow:visible}
@media(max-width:700px){nav{row-gap:var(--space-2)}nav .current{width:100%}.quest-dialog-heading{align-items:flex-start}#quest-dialog{padding:var(--space-3)}.quest-dialog-heading h2{font-size:var(--text-lg)}.quest-dialog-heading>.quiet{font-size:var(--text-xs);white-space:nowrap}#quest-stage{height:350px}.quest-action-bar>button{flex:1}}
#status-toast{width:max-content;max-width:min(90vw,600px)}