:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1.25rem 2rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.75rem}.header h1{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}.header .tag{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#ffffff73;border:1px solid rgba(255,255,255,.1);padding:.15rem .45rem;border-radius:.2rem}.main{flex:1;display:grid;grid-template-columns:1fr 320px;gap:0}.preview{display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.preview-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0%,transparent 70%)}.preview svg{position:relative;z-index:1;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}.controls{border-left:1px solid rgba(255,255,255,.08);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.control-section{display:flex;flex-direction:column;gap:.6rem}.control-section h3{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff6}.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.shape-btn{aspect-ratio:1;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;background:#ffffff08;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.5rem;transition:all .15s ease;color:#fff9}.shape-btn:hover{border-color:#fff3;background:#ffffff0f}.shape-btn.active{border-color:#78a0ff99;background:#78a0ff1a;color:#fff}.shape-btn span{font-size:.6rem;letter-spacing:.05em}.color-row{display:flex;align-items:center;gap:.5rem}.color-swatch-group{display:flex;gap:.35rem;flex-wrap:wrap}.color-swatch{width:1.75rem;height:1.75rem;border-radius:.35rem;border:2px solid transparent;cursor:pointer;transition:all .15s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px #78a0ff80}.color-picker-wrap{position:relative}.color-picker-input{width:1.75rem;height:1.75rem;border:1px dashed rgba(255,255,255,.2);border-radius:.35rem;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer;overflow:hidden;padding:0}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:.25rem}.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.pattern-btn{height:2.25rem;border:1px solid rgba(255,255,255,.1);border-radius:.35rem;cursor:pointer;transition:all .15s ease;overflow:hidden;position:relative;background:transparent}.pattern-btn:hover{border-color:#fff3}.pattern-btn.active{border-color:#78a0ff99;box-shadow:0 0 0 1px #78a0ff4d}.pattern-btn span{position:absolute;bottom:.15rem;left:0;right:0;text-align:center;font-size:.5rem;letter-spacing:.05em;color:#ffffff80}.text-input{width:100%;padding:.6rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#fafafa;font-size:.85rem;font-family:inherit;outline:none;transition:border-color .15s ease}.text-input:focus{border-color:#78a0ff80}.text-input::placeholder{color:#ffffff40}.font-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.font-btn{padding:.4rem;border:1px solid rgba(255,255,255,.1);border-radius:.35rem;background:#ffffff08;color:#fff9;cursor:pointer;font-size:.7rem;text-align:center;transition:all .15s ease}.font-btn:hover{border-color:#fff3}.font-btn.active{border-color:#78a0ff99;background:#78a0ff1a;color:#fff}.slider-row{display:flex;align-items:center;gap:.75rem}.slider-row label{font-size:.75rem;color:#ffffff80;min-width:3rem}.slider-row input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:#ffffff1a;outline:none}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#78a0ffcc;cursor:pointer}.slider-row .value{font-size:.7rem;color:#fff6;font-family:ui-monospace,monospace;min-width:2rem;text-align:right}@media(max-width:768px){.main{grid-template-columns:1fr;grid-template-rows:1fr auto}.controls{border-left:none;border-top:1px solid rgba(255,255,255,.08)}}