: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}.app-header{background:linear-gradient(135deg,#0f172a,#1a1145);border-bottom:1px solid rgba(255,255,255,.08);padding:1.5rem 2rem}.header-content{max-width:80rem;margin:0 auto}.app-header h1{margin:0 0 .2rem;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header p{margin:0;color:#ffffff73;font-size:.825rem}.app-body{flex:1;display:flex;max-width:80rem;width:100%;margin:0 auto;padding:1.5rem 2rem;gap:2rem}.controls-panel{width:20rem;flex-shrink:0;display:flex;flex-direction:column;gap:1.25rem;max-height:calc(100vh - 8rem);overflow-y:auto;padding-right:.5rem}.controls-panel::-webkit-scrollbar{width:4px}.controls-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.controls-section{border:1px solid rgba(255,255,255,.06);border-radius:.625rem;padding:1rem;background:#ffffff04}.controls-section h2{margin:0 0 .75rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#fff6}.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem}.type-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .25rem;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;background:#ffffff05;color:#fff9;cursor:pointer;transition:all .15s}.type-btn:hover{background:#ffffff0d;border-color:#ffffff26}.type-btn.active{background:#818cf81f;border-color:#818cf866;color:#a5b4fc}.type-icon{font-size:1.15rem}.type-label{font-size:.65rem;font-weight:500}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem}.preset-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;font-size:.65rem;cursor:pointer;transition:transform .1s}.preset-btn:hover{transform:scale(1.03)}.preset-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0}.control{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.65rem}.control:last-child{margin-bottom:0}.control-label{font-size:.75rem;color:#ffffff8c}.text-input{width:100%;padding:.4rem .6rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;color:#fafafa;font-size:.8rem;outline:none}.text-input:focus{border-color:#818cf866}.color-row{display:flex;gap:.75rem}.color-row .control{flex:1}.color-input{width:100%;height:2rem;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;background:transparent;cursor:pointer;padding:2px}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:.25rem}.range-input{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:4px;outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#818cf8;cursor:pointer}.checkbox-input{width:16px;height:16px;accent-color:#818cf8;cursor:pointer}.preview-panel{flex:1;min-width:0;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.preview-header h2{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#fff6}.code-btn{background:#818cf81f;border:1px solid rgba(129,140,248,.25);color:#a5b4fc;font-size:.75rem;padding:.35rem .75rem;border-radius:.375rem;cursor:pointer;transition:background .15s}.code-btn:hover{background:#818cf833}.preview-area{flex:1;display:grid;place-items:center;background:#ffffff04;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:3rem;min-height:20rem;background-image:linear-gradient(45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.02) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.02) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.widget-preview{padding:1.25rem;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006;transition:all .2s}.widget-title{letter-spacing:.02em}.code-export{margin-top:1rem;border:1px solid rgba(255,255,255,.08);border-radius:.625rem;overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.06);font-size:.75rem;color:#ffffff80}.copy-btn{background:#818cf826;border:none;color:#a5b4fc;font-size:.7rem;padding:.2rem .5rem;border-radius:.25rem;cursor:pointer}.copy-btn:hover{background:#818cf840}.code-block{margin:0;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.6;color:#ffffffa6;overflow-x:auto;max-height:15rem}@media(max-width:900px){.app-body{flex-direction:column;padding:1rem}.controls-panel{width:100%;max-height:none;overflow-y:visible;padding-right:0}.preview-area{padding:2rem 1rem}}