:root{color-scheme:dark;--ink: #07063f;--ink-2: #100c68;--ink-3: #1b16a2;--coral: #f47b68;--coral-soft: #ff9a86;--orange: #ff9d12;--spray: #d87238;--cream: #fff8ed;--line: rgba(255, 248, 237, .2);--line-strong: rgba(255, 248, 237, .36);--shadow: 0 28px 70px rgba(3, 2, 34, .34);font-family:Avenir Next Condensed,Arial Narrow,Helvetica Neue,sans-serif;background:var(--ink);color:var(--cream);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,rgba(244,123,104,.16),transparent 28%),linear-gradient(315deg,rgba(255,157,18,.18),transparent 24%),var(--ink)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}.export-actions button:disabled{cursor:wait}.app{min-height:100vh;padding:clamp(16px,3vw,38px)}.spray-site{--ink: var(--spray-site-bg);--ink-2: var(--spray-site-depth);--ink-3: #211633;--coral: var(--spray-site-accent);--orange: var(--spray-site-accent);--spray: var(--spray-site-accent);--cream: var(--spray-site-text);--line: rgba(255, 248, 237, .18);--line-strong: rgba(255, 248, 237, .34);--shadow: 0 28px 70px rgba(0, 0, 0, .42);min-height:100vh;padding:clamp(16px,3vw,38px);background:radial-gradient(circle at 50% 32%,rgba(var(--spray-site-accent-rgb),.17),transparent 28%),linear-gradient(180deg,var(--spray-site-depth),var(--spray-site-bg) 48%);color:var(--spray-site-text)}.file-input{position:fixed;width:1px;height:1px;opacity:.88;pointer-events:none}.upload-zone{min-height:calc(100vh - clamp(32px,6vw,76px));display:grid;place-items:center;align-content:center;gap:28px;border:2px dashed var(--coral);background:linear-gradient(90deg,rgba(255,248,237,.045) 1px,transparent 1px),linear-gradient(rgba(255,248,237,.045) 1px,transparent 1px),linear-gradient(160deg,var(--ink-3),var(--ink) 62%);background-size:48px 48px,48px 48px,auto;box-shadow:inset 0 0 0 1px #fff8ed14,var(--shadow);text-align:center;padding:clamp(28px,7vw,72px)}.brand-lockup{display:inline-flex;align-items:center;gap:12px;color:var(--cream);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.brand-lockup img,.panel-heading img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,248,237,.36)}.upload-copy{display:grid;gap:10px;max-width:820px}h1,h2{margin:0;color:var(--cream);font-weight:950;letter-spacing:0;text-transform:uppercase}h1{max-width:880px;font-size:clamp(44px,9vw,112px);line-height:.9}h2{font-size:32px;line-height:.9}.primary-action,.secondary-action,.ghost-action,.reset-action{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;padding:0 20px;color:var(--ink);font-weight:900;letter-spacing:0;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.primary-action{background:var(--orange);box-shadow:0 14px 34px #ff9d1247}.primary-action:hover,.secondary-action:hover,.ghost-action:hover,.reset-action:hover{transform:translateY(-1px)}.primary-action.compact{min-width:154px}.secondary-action,.ghost-action,.reset-action{background:#fff8ed1a;border-color:var(--line);color:var(--cream)}.spray-site .upload-zone{border-color:rgba(var(--spray-site-accent-rgb),.72);background:linear-gradient(90deg,rgba(255,248,237,.04) 1px,transparent 1px),linear-gradient(rgba(255,248,237,.04) 1px,transparent 1px),radial-gradient(circle at 50% 52%,rgba(var(--spray-site-accent-rgb),.22),transparent 28%),linear-gradient(160deg,var(--spray-site-depth),var(--spray-site-bg) 68%);background-size:46px 46px,46px 46px,auto,auto}.spray-site .brand-lockup{gap:14px;font-size:16px}.spray-site .brand-lockup img{width:44px;height:44px}.spray-site h1{max-width:980px;font-size:108px}.spray-site .upload-zone>.primary-action{min-width:188px;min-height:54px;padding:0 28px;font-size:15px}.spray-info-link{display:inline-flex;align-items:center;gap:8px;color:var(--spray-site-muted);font-size:14px;font-weight:850;letter-spacing:0;text-decoration:none;transition:color .16s ease,transform .16s ease}.spray-info-link:hover{color:var(--spray-site-text);transform:translateY(-1px)}.spray-site .workspace,.spray-site .control-panel{background:linear-gradient(180deg,#fff8ed18,#fff8ed09),var(--spray-site-depth)}.spray-site .primary-action{background:var(--spray-site-accent);box-shadow:0 14px 34px rgba(var(--spray-site-accent-rgb),.28);color:var(--spray-site-bg)}.spray-site .secondary-action,.spray-site .ghost-action,.spray-site .reset-action{background:#fff8ed14;border-color:var(--line);color:var(--spray-site-text)}.spray-site .secondary-action:hover,.spray-site .ghost-action:hover,.spray-site .reset-action:hover{border-color:rgba(var(--spray-site-accent-rgb),.72);color:var(--spray-site-accent)}.status-message{min-height:22px;margin:0;color:var(--cream);font-size:14px;font-weight:800;line-height:1.45}.editor-shell{width:min(1500px,100%);min-height:calc(100vh - clamp(32px,6vw,76px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(18px,3vw,34px);align-items:stretch}.workspace,.control-panel{border:1px solid var(--line);background:linear-gradient(180deg,#fff8ed1c,#fff8ed0b),#07063fb8;box-shadow:var(--shadow)}.workspace{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:18px;padding:clamp(14px,2.4vw,24px)}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center}.file-meta{min-width:0;display:grid;gap:4px;text-align:right;color:#fff8edc7;font-size:13px;font-weight:800}.file-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-wrap{min-height:280px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(45deg,rgba(255,248,237,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,248,237,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,248,237,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,248,237,.08) 75%),#03022285;background-position:0 0,0 14px,14px -14px,-14px 0;background-size:28px 28px;border:1px solid rgba(255,248,237,.14)}.spray-site .stage-wrap{background:linear-gradient(45deg,rgba(255,248,237,.06) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,248,237,.06) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,248,237,.06) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,248,237,.06) 75%),#00000038;background-position:0 0,0 14px,14px -14px,-14px 0;background-size:28px 28px;border-color:#fff8ed1f}.image-stage{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;overflow:hidden}.base-image{position:relative;z-index:0;display:block;max-width:100%;max-height:min(68vh,760px);width:auto;height:auto;-webkit-user-select:none;user-select:none}.paint-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}.image-stage.is-spray-mode .paint-canvas{pointer-events:auto;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2307063f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h.01M8 7h.01M12 9h.01M4 11h.01M8 13h.01'/%3E%3Crect x='19' y='7' width='5' height='5' fill='%23d87238'/%3E%3Cpath d='m24 12 3 3v11c0 1-.7 1.7-1.7 1.7h-7.6c-1 0-1.7-.7-1.7-1.7V15l3-3' fill='%23fff8ed'/%3E%3Cpath d='m16 18 11-3M16 24l11-3'/%3E%3C/g%3E%3C/svg%3E") 8 8,crosshair}.overlay-transform{position:absolute;z-index:2;transform-origin:center;line-height:0;touch-action:none;-webkit-user-select:none;user-select:none;will-change:left,top,transform,width;cursor:move}.overlay-transform.is-locked{display:none;pointer-events:none}.overlay-transform:hover,.overlay-transform.is-dragging{outline:2px solid rgba(255,157,18,.95);outline-offset:4px}.overlay-image{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.28));pointer-events:none}.transform-handle{position:absolute;z-index:3;width:34px;height:34px;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--orange);color:var(--ink);box-shadow:0 10px 22px #0302225c;opacity:0;transition:opacity .14s ease,transform .14s ease}.overlay-transform:hover .transform-handle,.overlay-transform.is-dragging .transform-handle{opacity:1}.transform-handle:hover{transform:scale(1.06)}.rotate-handle{top:-48px;left:50%;cursor:grab;transform:translate(-50%)}.rotate-handle:hover{transform:translate(-50%) scale(1.06)}.resize-handle{right:-18px;bottom:-18px;cursor:nwse-resize}.export-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.editor-status{text-align:center}.control-panel{display:grid;align-content:start;gap:22px;padding:clamp(16px,2.4vw,24px)}.panel-heading{display:flex;align-items:center;gap:13px}.control-group{display:grid;gap:12px}.control-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:#fff8edc7;font-size:14px;font-weight:900;text-transform:uppercase}.control-label strong{color:var(--cream);font-size:15px}.stepper-row{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:10px;align-items:center}.icon-button{width:42px;height:42px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff8ed14;color:var(--cream)}.icon-button:hover{border-color:var(--orange);color:var(--orange)}.spray-site .icon-button:hover{border-color:var(--spray-site-accent);color:var(--spray-site-accent)}input[type=range]{width:100%;accent-color:var(--orange)}.spray-site input[type=range]{accent-color:var(--spray-site-accent)}.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);overflow:hidden}.asset-tile{min-width:0;min-height:104px;display:grid;align-content:center;justify-items:center;gap:9px;border:0;background:#1b16a25c;color:var(--cream);padding:10px;transition:background .16s ease,color .16s ease,transform .16s ease}.asset-tile:hover,.asset-tile.is-selected{background:var(--coral);color:var(--ink)}.asset-tile:hover{transform:translateY(-1px)}.asset-tile img{width:88px;max-width:100%;height:48px;object-fit:contain}.asset-tile span{max-width:100%;overflow-wrap:anywhere;font-size:12px;font-weight:950;line-height:1.1;text-align:center}.spray-tool-tile{background:radial-gradient(circle at 34% 32%,rgba(216,114,56,.42),transparent 34%),#1b16a25c}.spray-tool-tile:hover,.spray-tool-tile.is-selected{background:var(--spray);color:var(--ink)}.spray-tool-icon{width:88px;max-width:100%;height:48px;display:inline-grid;place-items:center}.spray-controls{display:grid;gap:16px;padding-top:2px}.spray-controls .reset-action{background:#d872382e;border-color:#d872387a}.reset-action{width:100%}@media(max-width:1060px){.editor-shell{grid-template-columns:1fr}.control-panel{grid-row:auto}.asset-grid{grid-template-columns:repeat(5,minmax(92px,1fr));overflow-x:auto}.asset-tile{border-bottom:0}}@media(max-width:640px){.app{padding:12px}.upload-zone{min-height:calc(100vh - 24px);gap:22px;padding:22px}h1{font-size:clamp(40px,16vw,70px)}.topbar,.export-actions{align-items:stretch;flex-direction:column}.file-meta{text-align:left}.secondary-action,.primary-action.compact,.ghost-action{width:100%}.stage-wrap{min-height:220px}.base-image{max-height:58vh}.asset-grid{grid-template-columns:repeat(3,minmax(88px,1fr))}}@media(max-width:900px){.spray-site h1{max-width:720px;font-size:78px}}@media(max-width:640px){.spray-site .upload-zone{gap:24px;padding:26px 18px}.spray-site .brand-lockup{gap:10px;font-size:13px}.spray-site .brand-lockup img{width:34px;height:34px}.spray-site h1{max-width:390px;font-size:52px;line-height:.92}.spray-site .upload-zone>.primary-action{width:min(100%,220px)}}