.playground-controls{display:flex;flex-direction:row;gap:32px;margin-bottom:32px;flex-wrap:wrap;align-items:flex-start;background:#fff;border-radius:16px;box-shadow:0 2px 12px #0001;padding:24px}.playground-control-group{display:flex;align-items:center;gap:12px;margin-bottom:0}.playground-control-group label{font-weight:500;width:120px;min-width:100px;display:inline-block;color:#222}.playground-control-group input[type=color]{width:32px;height:32px;border:none;background:none;vertical-align:middle;cursor:pointer}.playground-control-group input[type=range]{flex:1 1;min-width:80px;max-width:180px;accent-color:#4caf50}.playground-control-group input[type=number],.playground-control-group input[type=text]{min-width:60px;max-width:120px;padding:4px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:15px;background:#f8fafc}.playground-control-group input[type=checkbox]{width:18px;height:18px;accent-color:#4caf50}.playground-control-group span{margin-left:8px;font-size:13px;color:#666}.playground-control-group .Dropdown{min-width:120px}.playground-controls-panel{width:340px;max-width:100vw;height:calc(100vh - 150px);min-height:400px;background:#fff;border-radius:16px;box-shadow:0 2px 12px #0001;padding:24px 18px 24px 24px;overflow-y:auto;overflow-x:hidden;position:-webkit-sticky;position:sticky;top:48px;display:flex;flex-direction:column;gap:0}.playground-controls-singlecol{display:flex;flex-direction:column;gap:12px;height:100%}.playground-colors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));grid-gap:18px 16px;gap:18px 16px;margin-bottom:24px;justify-items:center;align-items:center}.playground-colors-grid .playground-control-group{margin-bottom:0;justify-content:center}@media (max-width:600px){.playground-colors-grid{grid-template-columns:repeat(3,1fr);gap:10px 8px;margin-bottom:16px}}