:root{--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .35vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--color-bg: #131519;--color-surface: #1b1f25;--color-surface-2: #232833;--color-border: rgba(255,255,255,.12);--color-text: #f5f7fb;--color-text-muted: rgba(245,247,251,.74);--color-primary: #74b7ff;--shadow-lg: 0 20px 60px rgba(0,0,0,.35);--font-body: "Inter", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:radial-gradient(circle at top left,rgba(116,183,255,.12),transparent 28%),radial-gradient(circle at bottom right,rgba(95,255,209,.08),transparent 25%),var(--color-bg)}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:360px 1fr;gap:var(--space-8);min-height:100vh;padding:var(--space-8)}.panel{align-self:start;position:sticky;top:var(--space-8);background:#1b1f25e0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg)}.panel h1{margin:0 0 var(--space-2);font-size:var(--text-ml);line-height:1.1}.panel p,.hint{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.7}.group{margin-bottom:var(--space-6)}.group h2{margin:0 0 var(--space-3);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}.field{margin-bottom:var(--space-4)}.field label,.field-label{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--text-sm)}.field output{color:var(--color-primary)}input[type=text],input[type=color],input[type=file],select{width:100%}input[type=text],select{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-md);padding:.8rem .9rem}input[type=color]{height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);padding:.2rem}input[type=range]{width:100%;accent-color:var(--color-primary)}.grid-2,.actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.actions-3{grid-template-columns:1fr 1fr 1fr}button{border:0;border-radius:var(--radius-md);padding:.95rem .5rem;font-weight:600;cursor:pointer;transition:transform .18s ease,opacity .18s ease}button:hover{transform:translateY(-1px)}.primary{background:linear-gradient(135deg,#8ac5ff,#5ca7ff);color:#07111d}.secondary{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.workspace{display:grid;gap:var(--space-6);align-content:start}.dropzone{border:1px dashed rgba(255,255,255,.2);border-radius:var(--radius-xl);min-height:150px;display:grid;place-items:center;text-align:center;padding:var(--space-8);color:var(--color-text-muted);background:#ffffff08;transition:border-color .18s ease,background .18s ease}.dropzone.active{border-color:#74b7ffb3;background:#74b7ff14}.preview-shell{background:#ffffff0a;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);overflow:auto}canvas{width:100%;height:auto;display:block;border-radius:20px;background:#0b0d10;box-shadow:var(--shadow-lg)}.note{background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}@media (max-width: 1100px){.app-shell{grid-template-columns:1fr}.panel{position:static}}@media (max-width: 720px){.actions-3{grid-template-columns:1fr}}