.bg-app{color:var(--ink)}.bg-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:.5rem 0;display:flex}.bg-heading h1{margin:.7rem 0;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:750;line-height:1.2}.bg-heading p{max-width:650px;font-size:.9rem}.bg-badge{border:1px solid var(--glass-ring);background:var(--glass-input);border-radius:999px;padding:.35rem .7rem;font-size:.72rem;display:inline-block}.bg-actions{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.bg-actions h2{flex:1;font-weight:650}.bg-workspace{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:1.25rem;display:grid}.bg-controls.glass-card{padding:1rem}.bg-tabs{background:var(--glass-input);border-radius:1rem;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.25rem;display:grid}.bg-tabs button{border-radius:.7rem;padding:.65rem .25rem;font-size:.8rem}.bg-tabs button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,var(--brand-500),var(--aqua-500))}.bg-panel{gap:1rem;padding-top:1.1rem;display:grid}.bg-panel h2{font-size:.85rem;font-weight:650}.bg-field{gap:.45rem;min-width:0;font-size:.78rem;font-weight:550;display:grid}.bg-field>span{justify-content:space-between;gap:.5rem;display:flex}.bg-field .bg-value{font-variant-numeric:tabular-nums;color:var(--brand-500)}.bg-field input:not([type=range]),.bg-field select{border-radius:.65rem;width:100%;min-width:0;padding:.6rem}.bg-field input[type=range]{width:100%;accent-color:var(--brand-500)}.bg-color{background:var(--glass-input);border:1px solid var(--glass-ring);border-radius:.7rem;align-items:center;gap:.5rem;padding:.5rem;display:flex}.bg-color label{white-space:nowrap;align-items:center;gap:.5rem;font-size:.75rem;display:flex}.bg-color input[type=color]{cursor:pointer;border:0;width:32px;height:32px;padding:0}.bg-color input[type=text],.bg-color input:not([type]){width:100%;min-width:0;padding:.35rem;font-family:monospace;font-size:.85rem}.bg-swatches{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.bg-swatches button{border:1px solid var(--glass-ring);border-radius:.6rem;height:36px;transition:transform .15s}.bg-swatches button:hover{transform:scale(1.05)}.bg-text-button{text-align:left;color:var(--brand-500);font-size:.8rem}.bg-resolution{border-top:1px solid var(--glass-ring);margin-top:1.25rem}.bg-size-fields{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.bg-error{color:#b42335;font-size:.8rem}.dark .bg-error{color:#fda4af}.bg-preview-panel{gap:1rem;min-width:0;display:grid;position:sticky;top:100px}.bg-preview-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.bg-preview-area{background-color:var(--glass-input);background-image:radial-gradient(var(--glass-ring) 1px,transparent 1px);background-size:20px 20px;border-radius:1rem;justify-content:center;align-items:center;min-height:400px;padding:1rem;display:flex;overflow:hidden}.bg-art{flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 16px 35px #0003}.bg-art img{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.bg-interactive{touch-action:none;cursor:crosshair}.bg-origin{pointer-events:none;border:2px solid #fff;border-radius:50%;width:20px;height:20px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0008}.bg-origin:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;top:6px;left:6px}.bg-css{gap:1rem;display:grid}.bg-css textarea{resize:vertical;overflow-wrap:anywhere;border-radius:.7rem;width:100%;height:150px;padding:.75rem;font:12px/1.6 monospace}.bg-export{background:var(--bg);width:min(460px,94vw);max-height:90dvh;color:var(--ink);border:1px solid var(--glass-ring);border-radius:1.25rem;margin:auto;padding:1.5rem;overflow:auto}.bg-export .bg-panel{padding:0}.bg-export::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0009}.bg-app button:disabled{opacity:.5;cursor:wait}@media (max-width:1050px){.bg-workspace{grid-template-columns:280px minmax(0,1fr)}.bg-preview-area{min-height:320px;padding:.5rem}}@media (max-width:760px){.bg-workspace{grid-template-columns:1fr}.bg-preview-panel{grid-row:1;position:static}.bg-preview-area{min-height:200px}.bg-controls.glass-card{padding:1.25rem}.bg-heading .bg-actions{width:100%}.bg-heading .btn{flex:1;padding:.65rem .6rem;font-size:.8rem}.bg-art{max-height:none}}